Jqgrid pager 关于“local” dataType 动态加载数据分页的研究(没好用的研究结果)
系列索引
Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引
Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数、ColModel API、事件及方法
Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页、搜索、格式化、自定义按钮
Web jquery表格组件 JQGrid 的使用 - 6.准备工作 & Hello JQGrid
Web jquery表格组件 JQGrid 的使用 - 7.查询数据、编辑数据、删除数据
Web jquery表格组件 JQGrid 的使用 - 8.Pager、新增数据、查询、刷新、查看数据
Web jquery表格组件 JQGrid 的使用 - 全部代码
Web jquery表格组件 JQGrid 的使用 - 11.问题研究
使用Jqgrid时突然发现 数据类型为local时,
1 2 | datatype: 'local' , data:datas,<br>rowNum: 10,<br>rowList: [10], |
指定data的datas长度大于rowNum时,pager点击下一页最后一页都是无效的
使用
1 | $(grid)[0].addJSONData(jsongrid); |
也一样无效。
搜索发现不少使用
http://stackoverflow.com/questions/5537728/jqgrid-pager-not-working-with-local-datatype
localReader或者json
Reader
但我测试无效
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | var grid = $( '#table' ).jqGrid({ datatype: 'local' , altRows: true , colModel: [ {name: '0' , label: "Name" }, {name: '1' , label: "Color" }, ], pager: "#pager" , rowNum: 15, sortname: '0' , viewrecords: true , gridview: true , height: '100%' , autowidth: '100%' }); var reader = { root: function (obj) { return results.rows; }, page: function (obj) { return results.page; }, total: function (obj) { return results.total; }, records: function (obj) { return results.records; }, grid.setGridParam({data: results.rows, localReader: reader}).trigger( 'reloadGrid' ); |
1 | My "results" is an object like this : |
1 | {page: "1" , total: "70" , records: "1045" , rows:[.....]} |
1 | jsonReader格式如下: |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | jQuery( "#gridid" ).jqGrid({ ... jsonReader : { root: "rows" , //数据模型 page: "page" , //数据页码 total: "total" , //数据总页码 records: "records" , //数据总记录数 repeatitems: true , //如果设为false,则jqGrid在解析json时,会根据name(colmodel 指定的name)来搜索对应的数据元素(即可以json中元素可以不按顺序) cell: "cell" , //root 中row 行 id: "id" , //唯一标识 userdata: "userdata" , subgrid: { root: "rows" , repeatitems: true , cell: "cell" } }, ... }); 示例json 数据格式; { "total" : "xxx" , "page" : "yyy" , "records" : "zzz" , "rows" : [ { "id" : "1" , "cell" :[ "cell11" , "cell12" , "cell13" ]}, { "id" : "2" , "cell" :[ "cell21" , "cell22" , "cell23" ]}, ... ] } |
注意到加载json数据时
$(grid)[0].addJSONData(jsongrid);
是$(grid)[0]而不是$(grid)
推测[0]表示第一页,也就是数据全部加载到第一页了,但第一页数据数量受rowNum的限制
jqGrid获得所有行数据
var obj=$("#tablename").jqGrid("getRowData");
获取到的数据也是第一页的
建议解决办法:
1.使用后台返回的json数据,参考Web jquery表格组件 JQGrid 的使用 - 6.准备工作 & Hello JQGrid
1 2 | url: "WebService/UserHandler.ashx" , datatype: "json" , |
2.自定义数据分页
在onPaging事件里处理 参考Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数、ColModel API、事件及方法 事件
未尝试,感觉比较麻烦
3.数据量不是太大时,本地数据一般数据量不会太大
1 2 | rowNum: 1000, rowList: [1000], |
修改这两个不让翻页,改成拉滚动条吧
4.其他
欢迎高手给建议解决这个问题
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步