现在的位置: 首页 > easyui > Grid > datagrid > 正文
jQuery easyui datagrid 非URL后台分页
2012年01月16日 datagrid ⁄ 共 1029字 评论数 15 ⁄ 被围观 28,246 views+
文章目录
[隐藏]

现在主流的前端UI框架封装的datagrid基本都带有分页能力,而且做的很到位,大部分是根据URL的方式调用远程地址获取json格式的数据源,这很大程度上给开发者节省了时间。

不过问题是,并不是所有的异步请求的方式我们都使用URL,比如用spring和dwr框架来实现异步,或者是我们公司封装的callRemoteFunctionNoTrans异步方法,每次获取数据都是在前台javascript中调用,分页当然就不能靠URL了。

jQuery easyui datagrid 的相关文档都翻遍了,还真是没有不通过URL实现后台分页的现成API,不过既然 easyui datagrid 已经有了pageNumber和pageSize属性,我们对源码稍作修改便能实现这个API。

实现思路:

给easyui datagrid 添加一个方法,该方法类用于改变datagrid自身的分页参数,以及异步获取数据并加载获取到的数据。

代码修改:

一:定义默认的doPagination(pageNumber,pageSize)事件:

找到datagrid定义默认方法的地方,1.2.5版本在7610行附近(实在找不到的话,在压缩码里搜索"$.fn.datagrid.defaults")然后添加以下代码:

  1. ,doPagination:function(pageIndex,pageSize){}
二:修改pagination的onSelectPage事件:

onSelectPage事件在6162行附近(实在找不到的话,在压缩码里搜索"pagination"),修改为:

  1. onSelectPage:function(_406,_407){
  2. opts.pageNumber=_406;
  3. opts.pageSize=_407;
  4. opts.doPagination(_406,_407);
  5. _4b6(_3fc);
  6. }

2012-3-2更新(bug修正):

前面在对onSelectPage事件的处理上存在不足之处,如果是url方式调用的话,会存在脚本报错。报错原因是url方式调用的时候用户不会定义doPagination事件,从而出现未定变量的错误。

也就是说url方式的时候不应该调用doPagination了,所以应该修正代码为:

  1. opts.pageNumber=_406;
  2. opts.pageSize=_407;
  3. if(!opts.url){
  4. opts.doPagination(_406,_407);
  5. }
  6. _4b6(_3fc);

目前有 15 条留言 其中:访客:8 条, 博主:6 条 引用: 1

  1. @ssss : 2012年09月04日16:05:28  -49楼 @回复 回复

    onSelectPage:function(_406,_407){
    opts.pageNumber=_406;
    opts.pageSize=_407;
    opts.doPagination(_406,_407);
    //_4b6(_3fc); 我的这个会导致页面重新刷,我注掉就好了,不知道是否我项目的问题
    }
    我做的本来行数不会错回来不知道怎么就错误了

  2. @ssss : 2012年09月04日17:24:59  -48楼 @回复 回复

    可是//_4b6(_3fc); 注掉,他就会记录当前页数,我刷新就不好用了。。。
    _4b6(_3fc); 具体是干什么的呢


  3. 管理员
    世纪之光 : 2012年09月04日22:24:40  -47楼 @回复 回复

    @@ssss
    _4b6(_3fc); 这个函数主要是datagrid控件使用url方式请求数据用的,你使用url方式的话,把它注释掉肯定会有问题的。
    你如果不是使用url方式的话,那就把datagrid的url属性这是为null,这样就不会自动刷新了。

  4. beach : 2012年11月01日17:33:57  -46楼 @回复 回复

    ,doPagination:function(){pageIndex,pageSize} 这个方法,参数应该是加到括号里面的吧?

  5. sdstt89 : 2013年08月18日15:46:16  -45楼 @回复 回复

    lz,getAjaxData函数在哪里有定义,是要引入js文件么?


    • 管理员
      世纪之光 : 2013年08月18日23:51:02  地下1层 @回复 回复

      这个只是一个ajax方法而已,你可以用jQuery的ajax方法去实现,目的很明确,获取数据,不过我这个方法的ajax设置了同步而已。

  6. MicEzreal : 2013年11月18日15:30:31  -44楼 @回复 回复

    可以把那个事件的位置doPagination:function()的位置加到哪里吗,或者怎么在外部引用,版本是1.3.2


    • 管理员
      世纪之光 : 2013年11月19日09:34:11  地下1层 @回复 回复

      源代码你自己要学着去分析,相当于定义了一个doPagination事件,查找datagrid组件属性是在哪里定义的,然后追加到最后就行了。

  7. MicEzreal : 2013年11月18日15:38:00  -43楼 @回复 回复

    还有一个问题是,loadData方法加载数据,不会出现延迟吗,$(‘#tt’).datagrid(‘loadData’, getData());getData是ajax方法在success时候返回jsondata,当执行到loadData的时候,他会在getData方法还没成功得到返回数据的时候就已经运算完了,所以表格的数据是空.目前我在在ajax方法的success里面执行loadData;不知道你会不会遇到这个问题. :


    • 管理员
      世纪之光 : 2013年11月19日09:30:32  地下1层 @回复 回复

      像$(‘#tt’).datagrid(‘loadData’, getData())这种写法,你肯定要设置ajax为同步,要不然肯定这句代码执行后才获取到数据。或者就是在ajax方法的success事件里去loadData,这时候用异步也是安全的。
      提交成功,刷新页面之前你可以

  8. MicEzreal : 2013年11月20日17:02:49  -42楼 @回复 回复

    嗯,那晚找了一晚上才搞到,看JS代码好有压力…
    现在有个这样的问题,是我得到的一个JSON数据是这样的
    [“total”:”2″,”rows”:[{“id”:”01″,”name”:”Koi”,”sex”:”1″,”status”:”P”,”sextype”:[{“sexid”:”1″,”sexname”:”2″}]},{“id”:”01″,”name”:”Koi”,”sex”:”1″,”status”:”P”,”sextype”: [{“sexid”:”1″,”sexname”:”2″}]}] 像sex和sextype这样的一种外键关系,datagrid有没有办法绑定sextype里面的属性值.还有就是方便我用邮件交流吗


    • 管理员
      世纪之光 : 2013年11月20日20:08:34  地下1层 @回复 回复

      一般不建议在datagrid数据的json放复杂的数据结构,就是简单的键值对,值不要是object,否则展示的时候还需要定义formatter。你加群吧:126894273

  9. 大王 : 2015年01月04日10:35:42  -41楼 @回复 回复

    jQuery EasyUI 1.4

    怎么改啊,好像不一样的啊

给我留言

留言无头像?


×