这次的扩展可以优化数据表格在某些应用场景下的性能。比如不方便请求后端,或不方便频繁请求后端的场景。 扩展代码如下: /* 扩展easyui面板pagination,分页汉化 */ $.extend($.fn.pagination.defaults, { beforePageText: '第', afterPageText: '页 共 {pages} 页', displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录' }); /* 扩展easyui面板datagrid,静态数据自动分页。初始化静态数据,翻页、刷新也从静态数据里取 使用案例: _this.view.datagrid("initPnData",listData);//参数1:方法名,参数2:列表数据 _this.view.datagrid("autoPnData");//参数:方法名 */ $.extend($.fn.datagrid.methods, { initPnData: function (jq, pnData) { if (pnData) { jq.datagrid("getPager").data("pnData",pnData); jq.datagrid("autoPnData"); } }, autoPnData: function (jq) { var p=jq.datagrid("getPager"); var pnData=p.data("pnData"); if (pnData) { var options = p.pagination("options"); var pageNumber=options.pageNumber===0?1:options.pageNumber; var pageSize=options.pageSize; var start=(pageNumber-1)*pageSize; var data= pnData.slice(start,start+pageSize); jq.datagrid("loadData", { "total":pnData.length,rows:data } ); } } });
使用方式:
声明数据表格
var gridView=$("#gridID");
var gridColumns=[
[
{field: 'FileName', title: '文件名称', width: 300}, ....... ] ]
gridView.datagrid({ pagination: true, pageSize: 1000, pageList: [100,1000,5000], rownumbers: true, columns: gridColumns }); gridView.datagrid('getPager').pagination({ onSelectPage: function (pageNumber, pageSize) { gridView.datagrid("autoPnData");//当翻页时,自动分页 } });
初始化静态数据
$("#gridID").datagrid("initPnData",listData);
也可以在ajax之后,更新静态数据。