现在的位置: 首页 > easyui > Grid > datagrid > 正文
再次谈谈easyui datagrid 的数据加载
2012年02月26日 datagrid ⁄ 共 5438字 评论数 75 ⁄ 被围观 244,657 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数据就已经算是完美了,至少该有的问题均已经解决了,希望大家有更好建议一起交流……

目前有 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

给我留言

留言无头像?


×