jQuery easyui datagrid 的数据加载

╰半夏微凉° 2022-08-24 11:47 219阅读 0赞

这篇文章只谈jQuery easyui datagrid 的数据加载，因为这也是大家谈论最多的内容。其实easyui datagrid加载数据只有两种方式：一种是ajax加载目标url返回的json数据；另一种是加载js对象，也就是使用loadDate方法。

#### url方式加载数据： ####

##### 调用方式： #####

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

##### 相关方法： #####

<table style="line-height:28px; color:rgb(0,192,0); font-family:'Hiragino Sans GB W3','Hiragino Sans GB',Arial,Helvetica,simsun,u5b8bu4f53; font-size:16px; background-color:rgb(0,51,0)"> 
 <tbody> 
  <tr> 
   <td><span style="color:#ff0000">load</span></td> 
   <td><span style="color:#ff0000">param</span></td> 
   <td><span style="color:#ff0000">加载第一页数据，param将代替默认查询参数，注意的是该方法只适用于url方式.</span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#ff0000">reload</span></td> 
   <td><span style="color:#ff0000">param</span></td> 
   <td><span style="color:#ff0000">刷新当前页数据，与load方法不同的时候reload方法刷新当前页数据，而load方法会跳到第一页然后刷新.</span></td> 
  </tr> 
 </tbody> 
</table>

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][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][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][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的显示和隐藏的：

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

##### 如何不统计总数： #####

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

到这里，loadData方式加载grid数据就已经算是完美了，至少该有的问题均已经解决了，希望大家有更好建议一起交流……

文章转载。。。。[http://www.easyui.info/archives/204.html][http_www.easyui.info_archives_204.html]

[url_null]: http://blog.163.com/jr_yy821180/blog/static/19590412620130654210986/null
[http_www.easyui.info_archives_204.html]: http://www.easyui.info/archives/204.html