easyUI 之 Datagrid的使用和前台分页

最新推荐文章于 2021-10-20 15:49:49 发布

原创最新推荐文章于 2021-10-20 15:49:49 发布 · 6.9k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

本文介绍了博主在使用easyUI框架进行前端开发时，对Datagrid组件的使用体验和遇到的前端分页问题。虽然easyUI功能齐全，但文档较少，且在使用Datagrid进行数据加载时，全量加载并未实现真正的分页。通过分析，发现在调用getData后，分页方法pageFilter在success方法之前执行，导致数据为null。博主寻求解决这个问题的方法。

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

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

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

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

<table id="dg" class="easyui-datagrid" title="FB League Serach" style="width:auto;height:auto"
			data-options="
				iconCls: 'icon-edit',  //加载图标
				singleSelect: true,    //单行选中
				toolbar: '#tb',
				
				onClickRow: onClickRow,  //点击行编辑
				pagination:true,   //开启分页功能
				pagePosition:'bottom',
				rownumbers:true,
				pageSize:20,       
				pageList: [27, 28, 30],
				fitColumns:true,
				fit:true,  //固定分页导航栏位置
				">
				 
				<%-- url: '<%=request.getContextPath()%>/football/listPheasantLeagueVerbose.do',
				method: 'get',  --%>
			<thead>
			<tr>
				<th data-options="field:'id',width:50">Item ID</th>
				<th data-options="field:'leagueNameCn',width:250,editor:'text'">LeagueNameCN</th>
				<th data-options="field:'leagueNameEn',width:250,editor:'text'">LeagueNameEN</th>
				<th data-options="field:'leagueNameBig5',width:250,editor:'text'">LeagueNameBig5</th>
				<th data-options="field:'leagueNameAbbr',width:250,editor:'text'">LeagueNameAbbr</th>
				<th data-options="field:'leagueNameOther',width:250,editor:'text'">LeagueNameOther</th>
				<th data-options="field:'sport',width:200,editor:'text'">Sport</th>
				<th data-options="field:'leagueLevel',width:200,editor:'numberbox'">LeagueLevel</th>
				
			</tr>
			</thead>
		</table>
//添加按钮
<div id="tb" style="height:auto;">
		<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="append()" style="width:200px;height:30px;">Append</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeit()" style="width:200px;height:30px;">Remove</a>
		<a href="javascript:appendRow()" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept()" style="width:200px;height:30px;">Accept</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject()" style="width:200px;height:30px;">Reject</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="getChanges()" style="width:200px;height:30px;">GetChanges</a>
	</div>

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

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

<a href="javascript:appendRow()" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept()" style="width:200px;height:30px;">Accept</a>

<script type="text/javascript">
		var editIndex = undefined;
		function endEditing(){
			if (editIndex == undefined){return true}
			if ($('#dg').datagrid('validateRow', editIndex)){
				$('#dg').datagrid('endEdit', editIndex);
				editIndex = undefined;
				return true;
			} else {
				return false;
			}
		}
		function onClickRow(index){
			if (editIndex != index){
				if (endEditing()){
					$('#dg').datagrid('selectRow', index)
							.datagrid('beginEdit', index);
					editIndex = index;
				} else {
					$('#dg').datagrid('selectRow', editIndex);
				}
			}
		}
		
		
		function append(){
			if (endEditing()){
				$('#dg').datagrid('appendRow',{status:'P'});
				editIndex = $('#dg').datagrid('getRows').length-1;
				$('#dg').datagrid('selectRow', editIndex)
						.datagrid('beginEdit', editIndex);
			}
		}
		
		//增加一行到数据库
		function appendRow(){
			var rows = $('#dg').datagrid('getSelections');
			//var json = [];
			var loc;
			
				loc = {
					"id":rows[0].id,	
					"leagueNameCn":rows[0].leagueNameCn,
					"leagueNameEn":rows[0].leagueNameEn,
					"leagueNameBig5":rows[0].leagueNameBig5,
					"leagueNameAbbr":rows[0].leagueNameAbbr,
					"leagueNameOther":rows[0].leagueNameOther,
					"sport":rows[0].sport,
					"leagueLevel":rows[0].leagueLevel
				};
				//json.push(loc);
			
			json = JSON.stringify(loc);
			//alert(json);
			
			$.ajax({
				url:'<%=request.getContextPath()%>/football/savePheasantLeague.do',
				type:'post',
				async:true,
				dataType:'json',
				data:{"league":json},
				error:function(){alert("操作不成功");},
				success:function(response){
					if (response.value == 0) {
	                    alert("success");
	                    location.reload();
	                } else {
	                    alert("failed")
	                }
				}
			});
		}
		
		
		function removeit(){
			if (editIndex == undefined){return}
			$('#dg').datagrid('cancelEdit', editIndex)
					.datagrid('deleteRow', editIndex);
			editIndex = undefined;
		}
		function accept(){
			if (endEditing()){
				$('#dg').datagrid('acceptChanges');
			}
		}
		function reject(){
			$('#dg').datagrid('rejectChanges');
			editIndex = undefined;
		}
		function getChanges(){
			var rows = $('#dg').datagrid('getChanges');
			alert(rows.length+' rows are changed!');
		}
</script>

接下来，就开启用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<PheasantLeagueDTO> 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则报错，不知为什么，还请各位大佬指教。