easyUI 之 Datagrid的使用和前台分页

由于公司业务变更和任务安排，博主最近开始写前端了，前端页面！！！！虽然之前一直觉得前端很繁琐，但是确实繁琐啊，没办法，卯足劲干干干。

公司前端用的easyui框架，博主之前没咋弄过前端，不要说easyui了，所以蹭这次机会，来玩玩easyui。

接触了一段时日后，博主真心觉得easyui很强大，各种功能插件很齐全，使用起来也很方便。某些朋友说有点丑哈哈，确实不如现在主流的vue、angular以及bootstrap好看。还有一个是easyui文档少，使用起来费劲。好了，废话不多说了，接下来开始总结一下最近easyui遇到的各种坑吧。

---

博主使用easyui的Datagrid显示表格数据，接下来一起来先看看datagrid吧。

				 
				<%-- url: '<%=request.getContextPath()%>/football/listPheasantLeagueVerbose.do',
				method: 'get',  --%>
			

			

				
Item ID
				
LeagueNameCN
				
LeagueNameEN
				
LeagueNameBig5
				
LeagueNameAbbr
				
LeagueNameOther
				
Sport
				
LeagueLevel
				
			
			
		
//添加按钮

		Append
		Remove
		Accept
		Reject
		GetChanges
	

在table初始化时，可以设置url和method，datagrid会调用内部封装的ajax方法去load数据，但是数据是全量加载和显示的，这时候不会真正的分页，点击分页只是游标会变化，数据不会有显示上的变化。

tabe的append remove accept和reject方法如下js实现：在对应的按钮下实现ajax请求与后台和数据库交互。通过

Accept

接下来，就开启用datagrid的前端分页方法。

//加载数据时用js做前台分页
		function pagerFilter(data){
            if (typeof data.length == 'number' && typeof data.splice == 'function'){    // 判断数据是否是数组
                data = {
                    total: data.length,
                    rows: data
                }
            }
            var dg = $(this);
            var opts = dg.datagrid('options');
            var pager = dg.datagrid('getPager');
            pager.pagination({
                onSelectPage:function(pageNum, pageSize){
                    opts.pageNumber = pageNum;
                    opts.pageSize = pageSize;
                    pager.pagination('refresh',{
                        pageNumber:pageNum,
                        pageSize:pageSize
                    });
                    dg.datagrid('loadData',data);
                }
            });
            if (!data.originalRows){
                data.originalRows = (data.rows);
            }
            var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
            var end = start + parseInt(opts.pageSize);
            data.rows = (data.originalRows.slice(start, end));
            return data;
        }
 
         $(function(){//加载数据
            $('#dg').datagrid({loadFilter:pagerFilter}).datagrid({
            	url:'<%=request.getContextPath()%>/football/listPheasantLeagueVerbose.do',
            	method: 'get'
            	})
        }); 

后台controller：返回json数组

@RequestMapping(value = "/listPheasantLeagueVerbose.do", method = RequestMethod.GET, produces = {MediaType.APPLICATION_JSON_VALUE})
    @ResponseBody
    public List listPheasantLeagueVerbose() {
		
        return pheasantService.listPheasantLeagueVerbose();
    }

之前用ajax请求url加载数据，如下面的方法：

 $(function(){//加载数据
            $('#dg').datagrid({loadFilter:pagerFilter}).datagrid('loadData', getData());
        });

//ajax加载数据
		function getData(){
			$.ajax({
				url:'<%=request.getContextPath()%>/football/listPheasantLeagueVerbose.do',
				type:'get',
				async:true,
				dataType:'json',
				data:null,
				error:function(){alert("loading data failed.");},
				success:function(data){
					if (data != null) {
	                    alert("success");
	                    //location.reload();
	                    return data;
	                } else {
	                    alert("failed")
	                }
				}
			 	
			});

通过前端调试发现在调用getData之后，还没带success方法之前就进入到pageFilter分页方法了，导致分页方法传参data为null，判断data是否为数组时，data.length则报错，不知为什么，还请各位大佬指教。