easyui框架中datagrid可以很好的来展示大量的列表数组,但是由于datagrid一般都是从控件本身传递一个页码给后台,后台进行处理。
但是,最近项目跟webgis有关,数据查询直接是从服务中查询出来,无法像关系数据库那样,在数据库端对查询结果进行分页
所以,采用在datagrid的前端进行“假分页”来达到分页效果
【1】分页操作
///easyui前台分页操作 function pagerFilter(data){ if (typeof data.length == 'number' && typeof data.splice == 'function') { // is array 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; }
【2】在datagrid进行数据绑定时,绑定上分页方法即可
///初始化项目列表 function InitProjectTab(data) { debugger; $("#ProjectTab").datagrid({ loadFilter: pagerFilter }).datagrid({ title: '项目列表', //url: '', data:data, method: 'POST', 600, height: 500, singleSelect: true, autoRowHeight: false, checkOnSelect: true, selectOnCheck: true, nowrap: false, //是否换行,True 就会把数据显示在一行里 striped: true, //True 奇偶行使用不同背景色 sortOrder: 'desc', //排序类型 remoteSort: true, //定义是否从服务器给数据排序 fitColumns: true, columns: [[ { title: 'OBJECTID', field: 'OBJECTID', 40, sortable: true,hidden:true }, { title: '项目ID', field: 'PRJID', 40, sortable: true }, { title: '项目名称', field: 'PRJNAME', 100, sortable: true }, { title: '项目地址', field: 'FADDRESS', 80, sortable: true }, { title: '建设单位', field: 'FCOMPANY', 80, sortable: true }, ]], queryParams: { "action": "query" }, pagination: true, //是否开启分页 pageNumber: 1, //默认索引页 pageSize: 10, //默认一页数据条数 rownumbers: true,//行号 toolbar: '#projectBar', onLoadSuccess: function (data, param) { $("#projectBtn").fadeIn(100); $("#projectDiv").css("right", "20px"); }, onClickRow: function (index, row) { ShowRedLine(row.OBJECTID); //定位图形 } }); }