easyui datagrid关于分页的问题
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',
width: 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', width: 40, sortable: true,hidden:true
},
{
title: '项目ID', field: 'PRJID', width: 40, sortable: true
},
{
title: '项目名称', field: 'PRJNAME', width: 100, sortable: true
},
{
title: '项目地址', field: 'FADDRESS', width: 80, sortable: true
},
{
title: '建设单位', field: 'FCOMPANY', width: 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); //定位图形
}
});
}

浙公网安备 33010602011771号