再次谈谈easyui datagrid 的数据加载

╰半夏微凉° 2022-06-02 11:50 218阅读 0赞

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

文章目录

\[隐藏\]

*  [**1**url方式加载数据][1_url]
    
     *  [**1.1**调用方式][1.1]
     *  [**1.2**相关方法][1.2]
     *  [**1.3**二次加载问题][1.3]
 *  [**2**加载本地数据方式][2]
    
     *  [**2.1**调用方式][1.1]
     *  [**2.2**如何分页][2.2]
     *  [**2.3**加载中效果][2.3]
     *  [**2.4**如何不统计总数][2.4]

这篇文章只谈jQuery easyui datagrid 的数据加载，因为这也是大家谈论最多的内容。其实easyui datagrid加载数据只有两种方式：一种是ajax加载目标url返回的json数据；另一种是加载js对象，也就是使用loadDate方法。  
  
这里就自己的使用经验，对两种方式做简单总结和归纳，并且对使用过程中容易产生的误区做较为详细的描述，希望能对大家有所帮助。

url方式加载数据

调用方式

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

1.  **<****table** id="tt" style="width:700px;height:auto" title="DataGrid" idField="itemid" url="datagrid\_data2.json"**>**

1.  $('\#test').datagrid(\{   
2.      url:'datagrid\_data2.json'   
3.  \});

相关方法

<table> 
 <tbody> 
  <tr> 
   <td style="border-color:#cccccc;vertical-align:top;">load</td> 
   <td style="border-color:#cccccc;vertical-align:top;">param</td> 
   <td style="border-color:#cccccc;vertical-align:top;">加载<strong>第一页</strong>数据，param将代替默认查询参数，注意的是该方法只适用于url方式.</td> 
  </tr> 
  <tr> 
   <td style="border-color:#cccccc;vertical-align:top;">reload</td> 
   <td style="border-color:#cccccc;vertical-align:top;">param</td> 
   <td style="border-color:#cccccc;vertical-align:top;">刷新当前页数据，与load方法不同的时候reload方法刷新当前页数据，而load方法会跳到第一页然后刷新.</td> 
  </tr> 
  <tr> 
   <td style="border-color:#cccccc;vertical-align:top;">options</td> 
   <td style="border-color:#cccccc;vertical-align:top;">null</td> 
   <td style="border-color:#cccccc;vertical-align:top;">获取datagrid实例的各项参数值，常用的参数有url,pageNumber,pageSize这三个参数在请求数据以及分页功能中起重要作用.</td> 
  </tr> 
 </tbody> 
</table>

二次加载问题

对于使用url方式的初学者，经常碰到重复请求的问题，这个问题的根源是**多次渲染组件**，如何避免二次加载这样问题呢，个人觉得注意以下两点基本就可以防止二次加载了。

*  **使用load和reload函数去动态加载数据，而不是选择再次渲染组件。**很多人再次渲染组件的目的仅仅是为了设置url，这得不偿失，url的设置可以通过options方法获取到组件实例的opts，然后在给opts.url重新赋值即可；
 *  **class方式注册组件和javascript注册方式不要同时使用**。class注册方式一般是为了初始化属性，javascript方式则属性和事件都可初始化，但是不管是class方式还是javascipt方式注册组件，每次注册，只要**被设置过url属性**就会做请求。所以在不可避免要使用javascript方式注册的情况下，索性就不要使用class方式注册了。

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

加载本地数据方式

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

调用方式

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

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

如何分页

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

1.  //初始化dategrid   
2.  $('\#tt').datagrid(\{   
3.      url:null,   
4.      pagination:true,   
5.      pageSize:20,   
6.      pageNumber:1,   
7.      rownumbers:true  
8.  \});   
9.  $('\#tt').datagrid('getPager').pagination(\{   
10.     displayMsg:'当前显示从 \[\{from\}\] 到 \[\{to\}\] 共\[\{total\}\]条记录',   
11.     onSelectPage : function(pPageIndex, pPageSize) \{   
12.         //改变opts.pageNumber和opts.pageSize的参数值，用于下次查询传给数据层查询指定页码的数据   
13.         var gridOpts = $('\#tt').datagrid('options');   
14.         gridOpts.pageNumber = pPageIndex;   
15.         gridOpts.pageSize = pPageSize;     
16.         //定义查询条件   
17.         var queryCondition = \{name:"世纪之光"\};   
18.         //异步获取数据到javascript对象，入参为查询条件和页码信息   
19.         var oData = getAjaxDate("orderManageBuz","qryWorkOrderPaged",queryCondition,gridOpts);   
20.         //使用loadDate方法加载Dao层返回的数据   
21.         $('\#tt').datagrid('loadData',\{ "total" : oData.page.recordCount,"rows" : oData.data\});   
22.     \}   
23. \});

上面的代码应该很容易看懂了，做出来的分页基本也算正常，唯一的缺憾就是写起来不怎么便捷。那么如何才能便捷地实现分页呢？

之前我写过[jQuery easyui datagrid 非URL后台分页][jQuery easyui datagrid _URL]的文章，稍微对easyui datagrid做下扩展，增加一个doPagination事件，那么编码就较为简单了。

1.  //初始化dategrid   
2.  $('\#tt').datagrid(\{   
3.      url:null,   
4.      pagination:true,   
5.      pageSize:20,   
6.      pageNumber:1,   
7.      rownumbers:true,   
8.      doPagination:function(pPageIndex, pPageSize) \{    
9.          var gridOpts = $('\#tt').datagrid('options');   
10.         //定义查询条件   
11.         var queryCondition = \{name:"世纪之光"\};   
12.         //异步获取数据到javascript对象，入参为查询条件和页码信息   
13.         var oData = getAjaxDate("orderManageBuz","qryWorkOrderPaged",queryCondition,\{pageNumber:gridOpts.pageNumber,pageSize:gridOpts.pageSize\});   
14.         //使用loadDate方法加载Dao层返回的数据   
15.         $('\#tt').datagrid('loadData',\{ "total" : oData.page.recordCount,"rows" : oData.data\});   
16.     \},   
17. \});

这种方式就不用再去获取Pagination对象了，而且也不用设置opts的pageNumber和pageSize这两个属性了，编码变得简易了，是不是变得清爽了很多呢？

加载中效果

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

1.  //初始化dategrid   
2.  $('\#tt').datagrid(\{   
3.      url:null,   
4.      pagination:true,   
5.      pageSize:20,   
6.      pageNumber:1,   
7.      rownumbers:true,   
8.      doPagination:function(pPageIndex, pPageSize) \{   
9.          //改变opts.pageNumber和opts.pageSize的参数值，用于下次查询传给数据层查询指定页码的数据   
10.         var gridOpts = $('\#tt').datagrid('options');   
11.         gridOpts.pageNumber = pPageIndex;   
12.         gridOpts.pageSize = pPageSize;     
13.         Exec\_Wait('tt','loadDateGrid()');   
14.     \},   
15. \});   
16. function loadDateGrid()\{   
17.     var gridOpts = $('\#tt').datagrid('options');   
18.     //定义查询条件   
19.     var queryCondition = \{name:"世纪之光"\};   
20.     //异步获取数据到javascript对象，入参为查询条件和页码信息   
21.     var oData = getAjaxDate("orderManageBuz","qryWorkOrderPaged",queryCondition,gridOpts);   
22.     //使用loadDate方法加载Dao层返回的数据   
23.     $('\#tt').datagrid('loadData',\{ "total" : oData.page.recordCount,"rows" : oData.data\});   
24. \}   
25.   
26. /\*\*
27.  \* 封装一个公用的方法  
28.  \* @param \{Object\} grid table的id  
29.  \* @param \{Object\} func 获取异步数据的方法  
30.  \* @param \{Object\} time 延时执行时间  
31.  \*/  
32. function Exec\_Wait(grid,func,time)\{   
33.     var dalayTime = 500;   
34.     \_\_func\_=func;   
35.     \_\_selector\_ = '\#' + grid;   
36.     $(\_\_selector\_).datagrid("loading");   
37.     if (time) \{   
38.         dalayTime = time;   
39.     \}   
40.     gTimeout=window.setTimeout(\_Exec\_Wait\_,dalayTime);   
41. \}   
42. function \_Exec\_Wait\_()\{   
43.     try\{eval(\_\_func\_);   
44.     \}catch(e)\{   
45.         alert("\_\_func\_:" + \_\_func\_ + ";\_ExecWait\_" + e.message);   
46.     \}finally\{   
47.         window.clearTimeout(gTimeout);   
48.         $(\_\_selector\_).datagrid("loaded");   
49.     \}   
50. \}

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

1.  function loadDateGrid()\{   
2.      $('\#tt').datagrid('loading');//打开等待div   
3.      var queryCondition = \{   
4.          name: "世纪之光"  
5.      \};   
6.      var oData = getAjaxDate("orderManageBuz", "qryWorkOrderPaged", queryCondition, oPage);   
7.      $('\#tt').datagrid('loadData', \{   
8.          "total": oData.page.recordCount,   
9.          "rows": oData.data   
10.     \});   
11. \}   
12.   
13. $('\#tt').datagrid(\{   
14.     onLoadSuccess: function()\{   
15.         //加载完数据关闭等待的div   
16.         $('\#tt').datagrid('loaded');   
17.     \}   
18. \});

如何不统计总数

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

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

[1_url]: http://www.easyui.info/archives/204.html#url%E6%96%B9%E5%BC%8F%E5%8A%A0%E8%BD%BD%E6%95%B0%E6%8D%AE
[1.1]: http://www.easyui.info/archives/204.html#%E8%B0%83%E7%94%A8%E6%96%B9%E5%BC%8F
[1.2]: http://www.easyui.info/archives/204.html#%E7%9B%B8%E5%85%B3%E6%96%B9%E6%B3%95
[1.3]: http://www.easyui.info/archives/204.html#%E4%BA%8C%E6%AC%A1%E5%8A%A0%E8%BD%BD%E9%97%AE%E9%A2%98
[2]: http://www.easyui.info/archives/204.html#%E5%8A%A0%E8%BD%BD%E6%9C%AC%E5%9C%B0%E6%95%B0%E6%8D%AE%E6%96%B9%E5%BC%8F
[2.2]: http://www.easyui.info/archives/204.html#%E5%A6%82%E4%BD%95%E5%88%86%E9%A1%B5
[2.3]: http://www.easyui.info/archives/204.html#%E5%8A%A0%E8%BD%BD%E4%B8%AD%E6%95%88%E6%9E%9C
[2.4]: http://www.easyui.info/archives/204.html#%E5%A6%82%E4%BD%95%E4%B8%8D%E7%BB%9F%E8%AE%A1%E6%80%BB%E6%95%B0
[jQuery easyui datagrid _URL]: http://www.easyui.info/archives/17.html