现在的位置: 首页 > easyui > Grid > datagrid > 正文
小 中 大
再次谈谈easyui datagrid 的数据加载
2012年02月26日 ⁄ datagrid ⁄ 共 5438字 ⁄ 评论数 75 ⁄ 被围观 245,662 views+
文章目录
[隐藏]

这篇文章只谈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. });  
相关方法
load param 加载第一页数据，param将代替默认查询参数，注意的是该方法只适用于url方式.
reload param 刷新当前页数据，与load方法不同的时候reload方法刷新当前页数据，而load方法会跳到第一页然后刷新.
options null 获取datagrid实例的各项参数值，常用的参数有url,pageNumber,pageSize这三个参数在请求数据以及分页功能中起重要作用.
二次加载问题

对于使用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后台分页的文章，稍微对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. jQuery easyui datagrid 非URL后台分页
  2. jQuery EasyUI Datagrid 列属性函数中如何获取当前列
  3. jQuery EasyUI datagrid列名包含特殊字符会导致表格错
  4. jQuery EasyUI Datagrid性能优化专题
  5. jQuery EasyUI Datagrid VirtualScrollView视图简
  6. 基于1.3.3版本tooltip的datagrid单元格tip实现
  7. jQuery EasyUI Datagrid组件默认视图分析
  8. jQuery EasyUI Datagrid组件fixRowHeight接口源码分
tab组件的小工具条handler入参无法获取事件对象
基于1.3.3版本tooltip的datagrid单元格tip实现
浅谈jQuery Easyui的继承和依赖原理
Easyui panel tools(工具条)不能重用问题

目前有 75 条留言 其中：访客:46 条, 博主:28 条 引用: 1

  1. bobo : 2012年06月29日09:36:10  -49楼 @回复 回复

  2. 管理员     世纪之光 : 2012年06月29日11:36:29  -48楼 @回复 回复
  3. bobo : 2012年06月29日13:33:24  -47楼 @回复 回复

  4. 管理员     世纪之光 : 2012年06月29日13:45:25  -46楼 @回复 回复
  5. jquery 爱好者 : 2012年08月10日21:08:12  -45楼 @回复 回复
  6. jquery 爱好者 : 2012年08月10日21:09:05  -44楼 @回复 回复

  7. 管理员     世纪之光 : 2012年08月11日07:55:54  -43楼 @回复 回复
  8. Everhythm : 2012年08月18日23:25:57  -42楼 @回复 回复

  9. 管理员     世纪之光 : 2012年08月19日10:36:43  -41楼 @回复 回复
  10. @ssss : 2012年09月05日11:23:21  -40楼 @回复 回复
  11. @ssss : 2012年09月05日12:02:30  -39楼 @回复 回复

  12. 管理员     世纪之光 : 2012年09月05日12:20:07  -38楼 @回复 回复
  13. @ssss : 2012年09月05日12:29:38  -37楼 @回复 回复

  14. 管理员     世纪之光 : 2012年09月05日12:33:23  -36楼 @回复 回复
  15. @ssss : 2012年09月05日12:52:09  -35楼 @回复 回复

  16. 管理员     世纪之光 : 2012年09月05日17:06:39  -34楼 @回复 回复
  17. 爱上一只狐 : 2012年09月18日20:17:36  -33楼 @回复 回复
  18. wilkey : 2012年09月20日11:44:28  -32楼 @回复 回复
  19. eaayui_b-to-b : 2012年10月08日09:25:05  -31楼 @回复 回复
  20. eaayui_b-to-b : 2012年10月08日09:29:05  -30楼 @回复 回复
  21. eaayui_b-to-b : 2012年10月11日11:35:11  -29楼 @回复 回复
  22. liny : 2012年10月15日16:36:00  -28楼 @回复 回复
  23. liny : 2012年10月30日11:08:35  -27楼 @回复 回复
  24. peislin : 2012年11月23日09:44:20  -26楼 @回复 回复
  25. kids : 2013年07月31日11:55:36  -25楼 @回复 回复
  26. kimmy : 2013年08月20日18:48:52  -24楼 @回复 回复
  27. sunhaikuo : 2013年08月22日16:46:56  -23楼 @回复 回复
  28. wwy : 2013年08月30日16:45:55  -22楼 @回复 回复
  29. 小帅 : 2013年09月09日11:37:07  -21楼 @回复 回复
  30. kakarottoz : 2013年12月02日23:09:26  -20楼 @回复 回复
  31. g080166 : 2014年01月07日16:19:12  -19楼 @回复 回复
  32. twain : 2014年03月06日11:39:13  -18楼 @回复 回复
  33. zk : 2014年04月01日09:16:09  -17楼 @回复 回复
  34. MX : 2014年04月04日14:11:41  -16楼 @回复 回复
  35. Backache : 2014年05月08日10:37:28  -15楼 @回复 回复
  36. waiwai4701 : 2014年05月28日16:02:50  -14楼 @回复 回复
  37. ww : 2014年09月28日15:13:03  -13楼 @回复 回复
  38. 奋进 : 2014年10月30日16:15:11  -12楼 @回复 回复
  39. HelloWorld : 2015年04月28日16:26:57  -11楼 @回复 回复
  40. 渣渣 : 2015年06月10日17:26:28  -10楼 @回复 回复
  41. 我是龙 : 2015年08月04日11:03:46  -9楼 @回复 回复
  42. helloworld : 2015年10月15日13:55:02  -8楼 @回复 回复
  43. 向阳xlt : 2015年12月29日13:19:35  -7楼 @回复 回复
  44. DSer : 2017年06月07日19:00:59  -6楼 @回复 回复

查看来自外部的引用: 1

给我留言

留言无头像?


插入图片

返回首页

Copyright © 2012-2017 WebUI框架使用参考  保留所有权利.   Theme by Robin
×