自定义jQuery easyui datagrid的loader适配器，实现datagrid的前端分页

 

本方法适用于的于jQuery easyui 1.2.6+版本低于1.2.6的版本不能使用改方法。

loader适配器的实现代码如下：

 

function myLoader(param,success,error){
	var that = $(this);
	var opts = that.datagrid("options");
	if (!opts.url) {
		return false;
	}
	var cache = that.data().datagrid.cache;
	if (!cache) {
		$.ajax({
			type : opts.method,
			url : opts.url,
			data : param,
			dataType : "json",
			success : function (data) {
				that.data().datagrid['cache'] = data;
				success(bulidData(data));
			},
			error : function () {
				error.apply(this, arguments);
			}
		});
	} else {
		success(bulidData(cache));
	}
	
	function bulidData(data) {
		var temp = $.extend({},data);
		var tempRows = [];
		var start = (param.page - 1) * parseInt(param.rows);
		var end = start + parseInt(param.rows);
		var rows = data.rows;
		for (var i = start; i < end; i++) {
			if(rows[i]){
				tempRows.push(rows[i]);
			}else{
				break;
			}
		}
		temp.rows = tempRows;
		return temp;
	}
}

 具体使用：配置datagrid的loader属性为myLoader即可。

 

当你需要重新请求后台刷新数据时，请在你调用刷新方法之前执行$("#gridId").data().datagrid.cache = null; 该语句作用于清除当前缓存。

当然你实现的是前端分页。所以你后台返回的应该是该结果集下所有的记录。并且请不要在后天处理分页参数。后台返回的结果格式应该如是：｛"total":106,"rows":[{},{},{}.....]｝，且rows.length的长度应该等于total的值。

http://easyui.btboys.com/post-81.html

 

评论

2 楼 angelhau 2012-09-01  

duanbinhua 写道

很不错，实现了前端分页。但是，我有一个查询功能，根据编号或名称来查询数据，现在怎么从前端获取数据，做查询了，所有的数据都到了前端了

获取所有的rows做循环呗....

1 楼 duanbinhua 2012-08-31  

很不错，实现了前端分页。但是，我有一个查询功能，根据编号或名称来查询数据，现在怎么从前端获取数据，做查询了，所有的数据都到了前端了