jqGrid基本用法与示例
编程技术 / houtizong 发布于 3年前 85
一、jqGrid的基本用法
1、html页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jqgrid-test</title><!-- 引用jQueryUI的start主题 --><link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/start/jquery-ui.css" /><!-- 引用jqGrid样式 --><link rel="stylesheet" type="text/css" href="/resources/css/ui.jqgrid.css" /><!-- 引用jQuery --><script type="text/javascript" src="/resources/scripts/libs/jquery-1.10.2.min.js"></script><!-- 引用jqGrid --><script type="text/javascript" src="/resources/scripts/libs/jquery.jqGrid.min.js"></script><!-- 引用jqGrid提供的国际化，否则中文会报JS错误 --><script type="text/javascript" src="/resources/scripts/i18n/grid.locale-cn.js"></script><!-- 引用jqGrid测试js --><script type="text/javascript" src="/resources/scripts/init.js"></script></head><body><!-- jqGrid必要DOM，用于创建表格列表 --><table id="list"></table><!-- jqGrid必要DOM，用于创建翻页 --><div id="pager"></div></body></html>
2、init.js文件
jQuery("#list").jqGrid({ // 请求后台json数据的url url:'list.json', // 后台返回的数据格式 datatype: "json", // 列表标题 colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], // 列表模型 colModel:[ {name:'id',index:'id', width:55}, {name:'invdate',index:'invdate', width:90}, {name:'name',index:'name asc, invdate', width:100}, {name:'amount',index:'amount', width:80, align:"right"}, {name:'tax',index:'tax', width:80, align:"right"}, {name:'total',index:'total', width:80,align:"right"}, {name:'note',index:'note', width:150, sortable:false} ], // 一页显示的行记录数 rowNum:10, // 表格宽度 width:700, // 表格高度 height:200, // 翻页控制条中 每页显示记录数可选集合 rowList:[10,20,30], // 翻页DOM pager: '#pager', // 默认排序字段 sortname: 'invdate', // 是否显示行号，默认值是false，不显示 viewrecords: true, // 默认字段排序顺序，默认asc，正序 sortorder: "desc", // 列表总标题 caption:"测试", // 数据加载完成并且DOM创建完毕之后的回调函数 gridComplete: function(){ //TODO }, // 单元格被点击选择回调函数， rowid为改行数据id值，iCol为改行索引，cellcontent为该行html代码，e为click事件 onCellSelect: function(rowid, iCol, cellcontent,e){ //TODO } });
二、后台返回的数据及格式
格式1 ：行数据包含id、cell两个固定属性，id的值是行数据的主键值，cell的值是行数据的数组封装
{ "page":"1", "total":2, "records":"13", "rows":[ { "id":"13", "cell":["13","2007-10-06","Client 3","1000.00","0.00","1000.00",null] },{ "id":"12", "cell":["12","2007-10-06","Client 2","700.00","140.00","840.00",null] },{ "id":"11", "cell":["11","2007-10-06","Client 1","600.00","120.00","720.00",null] },{ "id":"10", "cell":["10","2007-10-06","Client 2","100.00","20.00","120.00",null] },{ "id":"9", "cell":["9","2007-10-06","Client 1","200.00","40.00","240.00",null] },{ "id":"8", "cell":["8","2007-10-06","Client 3","200.00","0.00","200.00",null] },{ "id":"7", "cell":["7","2007-10-05","Client 2","120.00","12.00","134.00",null] },{ "id":"6", "cell":["6","2007-10-05","Client 1","50.00","10.00","60.00",""] },{ "id":"5", "cell":["5","2007-10-05","Client 3","100.00","0.00","100.00","no tax at all"] },{ "id":"4", "cell":["4","2007-10-04","Client 3","150.00","0.00","150.00","no tax"] } ]}
格式2 ：直接把后台行数据json格式化
{ "page":"1", "total":2, "records":"13", "rows":[ { "id":"1", "invdate":"2007-10-06", "name":"Client 3", "amount":"1000.00", "tax":"0.00", "total":"1000.00", "note": null }, { "id":"2", "invdate":"2007-10-06", "name":"Client 3", "amount":"1000.00", "tax":"0.00", "total":"1000.00", "note": null }, ... ]}
三、后台返回数据的说明
| total | 查询的总页数 |
| page | 查询的当前页码 |
| records | 查询的总记录数 |
| rows | 当前查询页的数据集合 |
| id | 行数据主键，默认值0 |
| cell | 行数据的数组格式封装，默认值“” |
四、自定义后台返回数据属性
后台返回的数据格式必须满足上述两种格式，否则jqGrid解析就会错误或者某些功能失效。
更多情况下，后台返回的数据格式是符合上述两种格式之一的，只是属性名不一致而已。
比如jqGrid的page是当前页面，而多数应用程序可能会自定义为currPage，这个时候jqGrid
就无法解析了，不过jqGrid提供了jsonReader属性，可以让我们覆盖它原有的属性。
我们先看一下它的原有属性：
localReader = { root: "rows", page: "page", total: "total", records: "records", repeatitems: false, cell: "cell", id: "id", userdata: "userdata", subgrid: {root:"rows", repeatitems: true, cell:"cell"}}
我们只需要定义jqGrid时设置jsonReader属性即可：
$(document).ready(function(){ jQuery("#list").jqGrid({ // 请求后台json数据的url url:'list.json', ... // 重写后台返回数据的属性 jsonReader : { root : 'list', // 将rows修改为list page : 'currPage', // 将page修改为currPage total : 'totalPage', // 将total修改为totalPage records : 'totals' // 将records修改为totals } });});
五、自定义请求参数
jqGrid异步请求的默认请求参数属性包含：
{ page:"page", rows:"rows", sort:"sidx", order:"sord", search:"_search", nd:"nd", id:"id", oper:"oper", editoper:"edit", addoper:"add", deloper:"del", subgridid:"id", npage:null, totalrows:"totalrows"}
比如：http://localhost:8080/list.json?_search=false&nd=1381300504786&rows=10&page=1&sidx=invdate&sord=desc
如果需要改写请求参数属性，jqGrid也提供了prmNames这个属性用来修改请求参数属性。
我们只需要定义jqGrid时设置prmNames属性即可：
$(document).ready(function(){ jQuery("#list").jqGrid({ url:'list.json', ... prmNames : { 'page':'currPage', 'rows':'pageSize' } });}); 上面的请求示例就会修改为
http://localhost:8080/list.json?_search=false&nd=1381300504786&pageSize=10&currPage=1&sidx=invdate&sord=desc
请勿发布不友善或者负能量的内容。与人为善，比聪明更重要！
技术博客集 - 网站简介：
前后端技术：
后端基于Hyperf2.1框架开发,前端使用Bootstrap可视化布局系统生成
网站主要作用：
1.编程技术分享及讨论交流，内置聊天系统;
2.测试交流框架问题，比如：Hyperf、Laravel、TP、beego;
3.本站数据是基于大数据采集等爬虫技术为基础助力分享知识，如有侵权请发邮件到站长邮箱，站长会尽快处理;
4.站长邮箱：[email protected];
文章归档
文章标签
友情链接
