easyUI 之 Datagrid的使用和前台分页

最新推荐文章于 2024-09-21 19:42:30 发布

xiaolizh

最新推荐文章于 2024-09-21 19:42:30 发布

阅读量6.7k

点赞数

分类专栏： x

本文链接：https://blog.csdn.net/xiaolizh/article/details/82016268

版权

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

摘要由CSDN通过智能技术生成

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

公司前端用的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