这篇文章只谈jQuery easyui datagrid 的数据加载，因为这也是大家谈论最多的内容。其实easyui datagrid加载数据只有两种方式：一种是ajax加载目标url返回的json数据；另一种是加载js对象，也就是使用loadDate方法。
url方式加载数据：
调用方式：
目前可能大多数人都是选择这种方式，因为跟流行的框架结合的也比较好，使用url的话，可以将url写在DOM里面或者申明datagrid对象的url属性，以下两种方式都是可以的：
<table id="tt" style="width:700px;height:auto" title="DataGrid" idField="itemid" 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，同时这些编码似乎也不怎么便捷。
//定义全局变量记录分页信息
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对象了，编码变得简易了，同时还解决了页码显示不正确的问题。
加载中效果：
easyui datagrid只有在使用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就行了，具体实现就不在本篇文章关注的范围内了。
到这里，loadData方式加载grid数据就已经算是完美了，至少该有的问题均已经解决了，希望大家有更好建议一起交流……