利用loadFilter,可以对载入的Json数据做很多预处理操作,然后才显示数据。
这里的预处理操作完全可以包含搜索,排序,分页等等。
客户端搜索操作的实现如下:
加入搜索框:
<input id="searchName" class="easyui-searchbox" data-options="prompt:'请输入查找关键字',searcher:doSearch" style="width:150px; margin-left:20px"/>
然后实现搜索函数:
function doSearch(value, name) {
$('#tbl').datagrid({
loadFilter: function (data) {
var newdata = {};
newdata.rows = [];
for (var i = 0; i < data.length; i++) {
for (var it in data[i]) {
if (data[i][it].toString().indexOf(value) >= 0) {
newdata.rows.push(data[i]);
break;
}
}
}
newdata.total = newdata.rows.length;
return newdata;
}
});
$('#tbl').datagrid('reload');
}
客户端分页函数的实现:
function pagerFilter(data) {
var opts = $('#tbl').datagrid('options');
var pager = $('#tbl').datagrid('getPager');
pager.pagination({
onSelectPage: function (pageNum, pageSize) {
opts.pageNumber = pageNum;
opts.pageSize = pageSize;
pager.pagination('refresh', {
pageNumber: pageNum,
pageSize: pageSize
});
$('#tbl').datagrid('loadData', data);
}
});
var newdata = {};
var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
newdata.rows = (data.slice(start, end));
newdata.total = data.length;
return newdata;
}