文章目录
[隐藏]
现在主流的前端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"）然后添加以下代码：
- ,doPagination:function(pageIndex,pageSize){}
二：修改pagination的onSelectPage事件:
onSelectPage事件在6162行附近（实在找不到的话，在压缩码里搜索"pagination"），修改为：
- onSelectPage:function(_406,_407){
- opts.pageNumber=_406;
- opts.pageSize=_407;
- opts.doPagination(_406,_407);
- _4b6(_3fc);
- }
2012-3-2更新(bug修正)：
前面在对onSelectPage事件的处理上存在不足之处，如果是url方式调用的话，会存在脚本报错。报错原因是url方式调用的时候用户不会定义doPagination事件，从而出现未定变量的错误。
也就是说url方式的时候不应该调用doPagination了，所以应该修正代码为：
- opts.pageNumber=_406;
- opts.pageSize=_407;
- if(!opts.url){
- opts.doPagination(_406,_407);
- }
- _4b6(_3fc);
onSelectPage:function(_406,_407){
opts.pageNumber=_406;
opts.pageSize=_407;
opts.doPagination(_406,_407);
//_4b6(_3fc); 我的这个会导致页面重新刷，我注掉就好了，不知道是否我项目的问题
}
我做的本来行数不会错回来不知道怎么就错误了
可是//_4b6(_3fc); 注掉，他就会记录当前页数，我刷新就不好用了。。。
_4b6(_3fc); 具体是干什么的呢
管理员 世纪之光 : 2012年09月04日22:24:40 -47楼
@@ssss
_4b6(_3fc); 这个函数主要是datagrid控件使用url方式请求数据用的，你使用url方式的话，把它注释掉肯定会有问题的。
你如果不是使用url方式的话，那就把datagrid的url属性这是为null，这样就不会自动刷新了。
,doPagination:function(){pageIndex,pageSize} 这个方法，参数应该是加到括号里面的吧？
管理员 世纪之光 : 2012年11月01日18:17:35 地下1层
@beach : 谢谢提醒，这个地方确实写错了，这就改过来。
lz，getAjaxData函数在哪里有定义，是要引入js文件么？
管理员 世纪之光 : 2013年08月18日23:51:02 地下1层
这个只是一个ajax方法而已，你可以用jQuery的ajax方法去实现，目的很明确，获取数据，不过我这个方法的ajax设置了同步而已。
可以把那个事件的位置doPagination:function()的位置加到哪里吗,或者怎么在外部引用,版本是1.3.2
管理员 世纪之光 : 2013年11月19日09:34:11 地下1层
源代码你自己要学着去分析，相当于定义了一个doPagination事件，查找datagrid组件属性是在哪里定义的，然后追加到最后就行了。
还有一个问题是,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，这时候用异步也是安全的。
提交成功,刷新页面之前你可以
嗯,那晚找了一晚上才搞到,看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
jQuery EasyUI 1.4
怎么改啊，好像不一样的啊