这篇文章只谈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. * @param {Object} grid table的id
  28. * @param {Object} func 获取异步数据的方法
  29. * @param {Object} time 延时执行时间
  30. */
  31. function Exec_Wait(grid,func,time){
  32. var dalayTime = 500;
  33. __func_=func;
  34. __selector_ = '#' + grid;
  35. $(__selector_).datagrid("loading");
  36. if (time) {
  37. dalayTime = time;
  38. }
  39. gTimeout=window.setTimeout(_Exec_Wait_,dalayTime);
  40. }
  41. function _Exec_Wait_(){
  42. try{eval(__func_);
  43. }catch(e){
  44. alert("__func_:" + __func_ + ";_ExecWait_" + e.message);
  45. }finally{
  46. window.clearTimeout(gTimeout);
  47. $(__selector_).datagrid("loaded");
  48. }
  49. }

当然了,你也可以利用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. $('#tt').datagrid({
  13. onLoadSuccess: function(){
  14. //加载完数据关闭等待的div
  15. $('#tt').datagrid('loaded');
  16. }
  17. });
如何不统计总数

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

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

  1. //增加查询参数,在页面加载时运行
  2. function reloadgrid() {
  3. var test =document.getElementById("NodeChild").innerHTML;
  4. //查询参数直接添加在queryParams中
  5. $('#HaveInput').datagrid({
  6. url:"ScoresDetailsCity.ashx?test=" + test
  7. })
  8. var queryParams =$('#HaveInput').datagrid('options').queryParams;
  9. getQueryParams(queryParams);
  10. $('#HaveInput').datagrid('options').queryParams = queryParams;
  11. $("#HaveInput").datagrid('reload');
  12. }

谈谈easyui datagrid 的数据加载(转)的更多相关文章

  1. [转载]再次谈谈easyui datagrid 的数据加载

    这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数 ...

  2. 再次谈谈easyui datagrid 的数据加载

    from:http://www.easyui.info/archives/204.html 这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实ea ...

  3. 谈谈easyui datagrid 的数据加载

    文章目录 1url方式加载数据 1.1调用方式 1.2相关方法 1.3二次加载问题 2加载本地数据方式 2.1调用方式 2.2如何分页 2.3加载中效果 2.4如何不统计总数 这篇文章只谈jQuery ...

  4. jQuery easyui datagrid 的数据加载

        其实easyuidatagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数据:另一种是加载js对象,也就是使用loadDate方法,这种方法用于加载本地js数据(非ur ...

  5. easyui datagrid 的数据加载Json数据

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

  6. EasyUI - DataGrid 组建 - [ 组件加载和分页 ]

    效果: 原理:通过POST传递到数据后台字段. 此时上传的参数,page:当前页数,rows:每页显示的页数. 有此两项参数,计算取出数据条数. 通过后台接受参数,进行处理并返回抽取的数据. html ...

  7. 轻松搞定 easyui datagrid 二次加载的问题(转)

    对于使用url方式的初学者,经常碰到重复请求的问题,这个问题的根源是因为一旦设置了url参数,Datagrid组件在实例化的时候就会做请求,如何避免二次加载这样问题呢,个人觉得注意以下两点基本就可以防 ...

  8. easyUI datagrid 刷新取消加载信息 自动刷新闪屏问题

    <style type="text/css"> /*-- 消除grid屏闪问题 --//*/ .datagrid-mask { opacity: 0; filter: ...

  9. EasyUI datagrid 数据加载

    网上找了好多人的方法发现都有问题发一个可用方便的 主要分三种情况 加载1,loaddata 加载2,datagrid 加载3, url 加载 第一部分,datagrid加载 第二部分,点击 datag ...

随机推荐

  1. 企业版Oracle10g的安装-过程

    ylbtech-Oracle:企业版Oracle10g的安装-过程 Oracle10g的安装 在Windows操作系统上安装Oracle10g数据库的步骤如下: 0.1)从Oracle的官方网站上下载 ...

  2. Java:IO流的综合用法(从键盘录入数据并打印在控制台上)

    import java.io.*; public class IOTestDouble { public static void main(String[] args)throws Exception ...

  3. hdu 1242 Rescue(BFS入门)

    第一次用容器做的BFS题目,题目有个地方比较坑,就是遍历时的方向,比如上下左右能AC,右上左下就WA #include <stdio.h> #include <string.h> ...

  4. 第七章 JVM性能监控与故障处理工具(1)

    1.定位系统问题 依据 GC日志 堆转储快照(heapdump/hprof文件) 线程快照(threaddump/javacore文件) 运行日志 异常堆栈 分析依据的工具 jps:显示指定系统内的所 ...

  5. iOS开发-搜索栏UISearchBar和UISearchController

    iOS中UISearchDisplayController用于搜索,搜索栏的重要性我们就不说了,狼厂就是靠搜索起家的,现在越来越像一匹没有节操的狼,UC浏览器搜索栏现在默认自家的神马搜索,现在不管是社 ...

  6. mongoDB报错Cannot find module '../build/Release/bson'

    打算用nodejs写一个blog系统,发现nodejs还是存在很多的坑.在使用mongodb时遇到如下报错问题: { [Error: Cannot find module '../build/Rele ...

  7. CSS结构和层叠

    每个合法的文档都会生成一个文档树,从而能根据元素的祖先,属性,兄弟元素等创建选择器来选择元素.有了这个结构树,选择器才能起作用,这也是CSS继承的核心.继承是从一个元素向其后代元素传递属性值所采用的机 ...

  8. 运维-JVM监控之内存泄漏

    转载:https://blog.csdn.net/zdx_csdn/article/details/71214219 jmap -heap pid查看进程堆内存使用情况,包括使用的GC算法.堆配置参数 ...

  9. 破解无线网络密码-BT3如何使用2

    本教程只作学习和交流使用,任何其它商用与本人无关, 在开始教程之前, 首先需要用到几个软件,感兴趣的朋友看完贴子后可以去百度搜一下下载地址, 虚拟机: VMware Workstation 6.5 正 ...

  10. Android 四大组件之 Activity(一)

    1.Activity的定义及作用: Android系统中的四大组件之一,可以用于显示View.Activity是一个与用户交互的系统模块,几乎所有的Activity都是和用户进行交互的一个应用程序的组 ...