$("#dg").datagrid();
四个相关属性:pageList,pageSize,pagination,loadFilter
- pageList和pageSize一起,定义分页的大小
- pagination 显示分页工具栏
- loadFilter 加载过滤器,可以过滤和格式化数据后显示。
利用loadFilter进行前端分页:
该属性接受一个function,这样写,便能分页了:
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;
}
另外,easyui包里,有一个datagrid-filter.js文件,该文件有一个方法myLoadFilter:
function myLoadFilter(data){
var name = getPluginName(this);
var state = $.data(this, name);
var opts = state.options;
if (name == 'datagrid' && $.isArray(data)){
data = {
total: data.length,
rows: data
};
}
if (!opts.remoteFilter){
if (!state.filterSource){
state.filterSource = data;
}
data = $.extend({}, state.filterSource);
if (opts.filterRules.length){
var rows = [];
for(var i=0; i<data.rows.length; i++){
var row = data.rows[i];
if (isMatch(row)){
rows.push(row);
}
}
data = {
total: data.total - (data.rows.length - rows.length),
rows: rows
};
}
if (opts.pagination){
var dg = $(this);
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', state.filterSource);
}
});
var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
data.rows = data.rows.slice(start, end);
}
}
return data;
function isMatch(row) {
var rules = opts.filterRules;
for (var i = 0; i < rules.length; i++) {
var rule = rules[i];
var source = row[rule.field];
if (source || source == "" || typeof (source) == "number") {
var op = opts.operators[rule.op];
if (!op.isMatch(source, rule.value)) { return false }
}
}
return true;
}
}
这个方法也是前端分页的,有时候设置pagination为true,但未能成功分页时,多半是这个方法没有起作用,所以要自己写个像pagerFilter这样的方法,显示的设置。