easyui datagrid 的数据加载

http://www.easyui.info/archives/204.html

url方式加载数据:

调用方式:

目前可能大多数人都是选择这种方式,因为跟流行的框架结合的也比较好,使用url的话,可以将url写在DOM里面或者申明datagrid对象的url属性,以下两种方式都是可以的:

$('#test').datagrid({
	url:'datagrid_data2.json'
});

相关方法:

load,param,加载第一页数据,param将代替默认查询参数,注意的是该方法只适用于url方式.

reload,param,刷新当前页数据,与load方法不同的时候reload方法刷新当前页数据,而load方法会跳到第一页然后刷新.

load方法在datagrid的api文档里面写得很清楚了,该方法是加载第一页数据的,在具体的应用中,这个方法主要用于刷新数据。

因为url方式网上的资料特别多,我这里就简述这么多,下面重点讨论一下loadDate方式加载数据。

加载本地数据方式:

首先要明白“加载本地数据”是个什么概念,这里指的是加载javascript对象数据,而javascript数据对象显然可以使是通过其它异步方式获得的,所以这个“加载本地数据”的描述并不准确。

调用方式:

先要将url属性设置为null,或者不设置,然后使用datagrid的loadDate方法加载js数据对象,这个对象包含两个属性,一个是记录总数,一个是当前页码的对象数组。例如:

var obj = {'total':100,'rows':[{id:'1',name:'一'},{id:'2',name:'二'}]};
$('#tt').datagrid('loadData',obj);

如何分页:

不对源码做任何改动的话,可以首先获取datagrid的Pagination对象,然后通过写Pagination对象的onSelectPage事件来实现分页:

//定义全局变量记录分页信息
var oPage = {
	pageIndex:1,
	pageSize:20
};
//初始化dategrid
$('#tt').datagrid({
	url:null,
	pagination:true,
	pageSize:20,
	pageNumber:1,
	rownumbers:true
});
$('#tt').datagrid('getPager').pagination({
	displayMsg:'当前显示从 [{from}] 到 [{to}] 共[{total}]条记录',
	onSelectPage : function(pPageIndex, pPageSize) {
		//改变oPage的参数值,用于下次查询传给数据层查询指定页码的数据
		oPage.pageIndex = pPageIndex;
		oPage.pageSize = pPageSize;	
		//定义查询条件
		var queryCondition = {name:"世纪之光"};
		//异步获取数据到javascript对象,入参为查询条件和页码信息
		var oData = getAjaxDate("orderManageBuz","qryWorkOrderPaged",queryCondition,oPage);
		//使用loadDate方法加载Dao层返回的数据
		$('#tt').datagrid('loadData',{"total":oData.page.recordCount,"rows":oData.data});
	}
});

上面的代码应该很容易看懂了,做出来的分页基本也算正常,不过有一个缺憾,那就是当显示行号的时候,第一页数据是从1-20的话,第二页数据的行号还会保持1-20,同时这些编码似乎也不怎么便捷。

之前我写过jQueryeasyuidatagrid非URL后台分页http://www.easyui.info/archives/17.html的文章,稍微对easyuidatagrid做下扩展,增加一个doPagination事件,那么编码就较为简单了,而且行号不正确的问题也就顺便解决了。

//定义全局变量记录分页信息
var oPage = {
	pageIndex:1,
	pageSize:20
};
//初始化dategrid
$('#tt').datagrid({
	url:null,
	pagination:true,
	pageSize:20,
	pageNumber:1,
	rownumbers:true,
	doPagination:function(pPageIndex, pPageSize) {
		//改变oPage的参数值,用于下次查询传给数据层查询指定页码的数据
		oPage.pageIndex = pPageIndex;
		oPage.pageSize = pPageSize;	
		//定义查询条件
		var queryCondition = {name:"世纪之光"};
		//异步获取数据到javascript对象,入参为查询条件和页码信息
		var oData = getAjaxDate("orderManageBuz","qryWorkOrderPaged",queryCondition,oPage);
		//使用loadDate方法加载Dao层返回的数据
		$('#tt').datagrid('loadData',{"total":oData.page.recordCount,"rows":oData.data});
	},
});

这种方式就不用再去获取Pagination对象了,编码变得简易了,同时还解决了页码显示不正确的问题。

加载中效果:

easyuidatagrid只有在使用url方式获取数据的时候才会显示“加载中……”的遮罩效果,使用loadDate方法加载数据的话,其实也可以用上这效果,只不过稍微麻烦些:

//定义全局变量记录分页信息
var oPage = {
	pageIndex:1,
	pageSize:20
};
//初始化dategrid
$('#tt').datagrid({
	url:null,
	pagination:true,
	pageSize:20,
	pageNumber:1,
	rownumbers:true,
	doPagination:function(pPageIndex, pPageSize) {
		//改变oPage的参数值,用于下次查询传给数据层查询指定页码的数据
		oPage.pageIndex = pPageIndex;
		oPage.pageSize = pPageSize;
		Exec_Wait('tt','loadDateGrid()');
	},
});
function loadDateGrid(){
	//定义查询条件
	var queryCondition = {name:"世纪之光"};
	//异步获取数据到javascript对象,入参为查询条件和页码信息
	var oData = getAjaxDate("orderManageBuz","qryWorkOrderPaged",queryCondition,oPage);
	//使用loadDate方法加载Dao层返回的数据
	$('#tt').datagrid('loadData',{"total":oData.page.recordCount,"rows":oData.data});
}

/**
 * 封装一个公用的方法
 * @param {Object} grid table的id
 * @param {Object} func 获取异步数据的方法
 * @param {Object} time 延时执行时间
 */
function Exec_Wait(grid,func,time){
	var dalayTime = 500;
	__func_=func;
	__selector_ = '#' + grid;
	$(__selector_).datagrid("loading");
	if (time) {
		dalayTime = time;
	}
	gTimeout=window.setTimeout(_Exec_Wait_,dalayTime);
}
function _Exec_Wait_(){
	try{eval(__func_);
	}catch(e){
		alert("__func_:" + __func_ + ";_ExecWait_" + e.message);
	}finally{
		window.clearTimeout(gTimeout);
		$(__selector_).datagrid("loaded");
	}
}

当然了,你也可以利用datagrid的onLoadSuccess事件来实现,反正最终都是调用datagrid的loding和loaded方法完成等待DIV的显示和隐藏的:

function loadDateGrid(){
    $('#tt').datagrid('loading');//打开等待div
    var queryCondition = {
        name: "世纪之光"
    };
    var oData = getAjaxDate("orderManageBuz", "qryWorkOrderPaged", queryCondition, oPage);
    $('#tt').datagrid('loadData', {
        "total": oData.page.recordCount,
        "rows": oData.data
    });
}

$('#tt').datagrid({
    onLoadSuccess: function(){
        //加载完数据关闭等待的div
        $('#tt').datagrid('loaded');
    }
});

如何不统计总数:

有时候数据层的数据量特别大,查询统计总数的话会很耗时,统计总数就显得不怎么合适了,如何不统计总数完全看你后台怎么写了,可以虚拟一个一个总数,这个数字总是比当前页码大1就行了,具体实现就不在本篇文章关注的范围内了。

相关推荐