jqGrid基本用法与示例

转自：https://chuanlu.iteye.com/blog/1953544

一、jqGrid的基本用法

 

1、html页面

 

Html代码  收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>jqgrid-test</title>  
  6. <!-- 引用jQueryUI的start主题 -->  
  7. <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/start/jquery-ui.css" />  
  8. <!-- 引用jqGrid样式 -->  
  9. <link rel="stylesheet" type="text/css" href="/resources/css/ui.jqgrid.css" />  
  10. <!-- 引用jQuery -->  
  11. <script type="text/javascript" src="/resources/scripts/libs/jquery-1.10.2.min.js"></script>  
  12. <!-- 引用jqGrid -->  
  13. <script type="text/javascript" src="/resources/scripts/libs/jquery.jqGrid.min.js"></script>  
  14. <!-- 引用jqGrid提供的国际化，否则中文会报JS错误 -->  
  15. <script type="text/javascript" src="/resources/scripts/i18n/grid.locale-cn.js"></script>  
  16. <!-- 引用jqGrid测试js -->  
  17. <script type="text/javascript" src="/resources/scripts/init.js"></script>  
  18. </head>  
  19. <body>  
  20. <!-- jqGrid必要DOM，用于创建表格列表 -->  
  21. <table id="list"></table>  
  22. <!-- jqGrid必要DOM，用于创建翻页 -->  
  23. <div id="pager"></div>  
  24. </body>  
  25. </html>  

  

2、init.js文件

 

Js代码  收藏代码
  1. jQuery("#list").jqGrid({  
  2.     // 请求后台json数据的url  
  3.     url:'list.json',  
  4.     // 后台返回的数据格式  
  5.     datatype: "json",  
  6.     // 列表标题  
  7.     colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],  
  8.     // 列表模型  
  9.     colModel:[   
  10.         {name:'id',index:'id', width:55},   
  11.         {name:'invdate',index:'invdate', width:90},   
  12.         {name:'name',index:'name asc, invdate', width:100},   
  13.         {name:'amount',index:'amount', width:80, align:"right"},   
  14.         {name:'tax',index:'tax', width:80, align:"right"},   
  15.         {name:'total',index:'total', width:80,align:"right"},   
  16.         {name:'note',index:'note', width:150, sortable:false}   
  17.     ],  
  18.     // 一页显示的行记录数  
  19.     rowNum:10,   
  20.     // 表格宽度  
  21.     width:700,  
  22.     // 表格高度  
  23.     height:200,  
  24.     // 翻页控制条中 每页显示记录数可选集合  
  25.     rowList:[10,20,30],   
  26.     // 翻页DOM  
  27.     pager: '#pager',  
  28.     // 默认排序字段  
  29.     sortname: 'invdate',  
  30.     // 是否显示行号，默认值是false，不显示  
  31.     viewrecords: true,  
  32.     // 默认字段排序顺序，默认asc，正序  
  33.     sortorder: "desc",   
  34.     // 列表总标题  
  35.     caption:"测试",  
  36.     // 数据加载完成并且DOM创建完毕之后的回调函数  
  37.     gridComplete: function(){  
  38.         //TODO  
  39.     },  
  40.     // 单元格被点击选择回调函数， rowid为改行数据id值，iCol为改行索引，cellcontent为该行html代码，e为click事件  
  41.     onCellSelect: function(rowid, iCol, cellcontent,e){  
  42.         //TODO  
  43.     }  
  44. });  

 

二、后台返回的数据及格式

 

格式1 ：行数据包含id、cell两个固定属性，id的值是行数据的主键值，cell的值是行数据的数组封装

 

Js代码  收藏代码
  1. {  
  2.     "page":"1",  
  3.     "total":2,  
  4.     "records":"13",  
  5.     "rows":[  
  6.         {  
  7.             "id":"13",  
  8.             "cell":["13","2007-10-06","Client 3","1000.00","0.00","1000.00",null]  
  9.         },{  
  10.             "id":"12",  
  11.             "cell":["12","2007-10-06","Client 2","700.00","140.00","840.00",null]  
  12.         },{  
  13.             "id":"11",  
  14.             "cell":["11","2007-10-06","Client 1","600.00","120.00","720.00",null]  
  15.         },{  
  16.             "id":"10",  
  17.             "cell":["10","2007-10-06","Client 2","100.00","20.00","120.00",null]  
  18.         },{  
  19.             "id":"9",  
  20.             "cell":["9","2007-10-06","Client 1","200.00","40.00","240.00",null]  
  21.         },{  
  22.             "id":"8",  
  23.             "cell":["8","2007-10-06","Client 3","200.00","0.00","200.00",null]  
  24.         },{  
  25.             "id":"7",  
  26.             "cell":["7","2007-10-05","Client 2","120.00","12.00","134.00",null]  
  27.         },{  
  28.             "id":"6",  
  29.             "cell":["6","2007-10-05","Client 1","50.00","10.00","60.00",""]  
  30.         },{  
  31.             "id":"5",  
  32.             "cell":["5","2007-10-05","Client 3","100.00","0.00","100.00","no tax at all"]  
  33.         },{  
  34.             "id":"4",  
  35.             "cell":["4","2007-10-04","Client 3","150.00","0.00","150.00","no tax"]  
  36.         }  
  37.     ]  
  38. }  

  

 格式2 ：直接把后台行数据json格式化

 

Js代码  收藏代码
  1. {  
  2.     "page":"1",  
  3.     "total":2,  
  4.     "records":"13",  
  5.     "rows":[  
  6.         {  
  7.             "id":"1",  
  8.             "invdate":"2007-10-06",  
  9.             "name":"Client 3",  
  10.             "amount":"1000.00",  
  11.             "tax":"0.00",  
  12.             "total":"1000.00",  
  13.             "note": null  
  14.         },  
  15.         {  
  16.             "id":"2",  
  17.             "invdate":"2007-10-06",  
  18.             "name":"Client 3",  
  19.             "amount":"1000.00",  
  20.             "tax":"0.00",  
  21.             "total":"1000.00",  
  22.             "note": null  
  23.         },  
  24.         ...  
  25.     ]  
  26. }  

 

三、后台返回数据的说明

 

total 查询的总页数
page 查询的当前页码
records 查询的总记录数
rows 当前查询页的数据集合
id 行数据主键，默认值0
cell 行数据的数组格式封装，默认值“”

 

四、自定义后台返回数据属性

后台返回的数据格式必须满足上述两种格式，否则jqGrid解析就会错误或者某些功能失效。

更多情况下，后台返回的数据格式是符合上述两种格式之一的，只是属性名不一致而已。

比如jqGrid的page是当前页面，而多数应用程序可能会自定义为currPage，这个时候jqGrid

就无法解析了，不过jqGrid提供了jsonReader属性，可以让我们覆盖它原有的属性。

我们先看一下它的原有属性：

 

Js代码  收藏代码
  1. localReader = {  
  2.    root: "rows",  
  3.    page: "page",  
  4.    total: "total",  
  5.    records: "records",  
  6.    repeatitems: false,  
  7.    cell: "cell",  
  8.    id: "id",  
  9.    userdata: "userdata",  
  10.    subgrid: {root:"rows", repeatitems: true, cell:"cell"}  
  11. }  

 

我们只需要定义jqGrid时设置jsonReader属性即可：

 

Js代码  收藏代码
  1. $(document).ready(function(){  
  2.     jQuery("#list").jqGrid({  
  3.         // 请求后台json数据的url  
  4.         url:'list.json',  
  5.         ...  
  6.         // 重写后台返回数据的属性  
  7.         jsonReader : {  
  8.             root : 'list', // 将rows修改为list  
  9.             page : 'currPage', // 将page修改为currPage  
  10.             total : 'totalPage', // 将total修改为totalPage  
  11.             records : 'totals' // 将records修改为totals  
  12.         }  
  13.     });  
  14. });  

 

五、自定义请求参数

jqGrid异步请求的默认请求参数属性包含：

 

Js代码  收藏代码
  1. {  
  2.     page:"page",  
  3.     rows:"rows",   
  4.     sort:"sidx",   
  5.     order:"sord",   
  6.     search:"_search",   
  7.     nd:"nd",   
  8.     id:"id",   
  9.     oper:"oper",   
  10.     editoper:"edit",   
  11.     addoper:"add",   
  12.     deloper:"del",   
  13.     subgridid:"id",   
  14.     npage:null,   
  15.     totalrows:"totalrows"  
  16. }   

 

比如：http://localhost:8080/list.json?_search=false&nd=1381300504786&rows=10&page=1&sidx=invdate&sord=desc

如果需要改写请求参数属性，jqGrid也提供了prmNames这个属性用来修改请求参数属性。

 

我们只需要定义jqGrid时设置prmNames属性即可：

 

Js代码  收藏代码
  1. $(document).ready(function(){  
  2.     jQuery("#list").jqGrid({  
  3.         url:'list.json',  
  4.         ...  
  5.         prmNames : {  
  6.             'page':'currPage',  
  7.             'rows':'pageSize'  
  8.         }  
  9.     });  
  10. });  

上面的请求示例就会修改为

http://localhost:8080/list.json?_search=false&nd=1381300504786&pageSize=10&currPage=1&sidx=invdate&sord=de

posted on 2019-03-22 10:46  Sharpest  阅读(1060)  评论(0)  编辑  收藏  举报
Copyright © 2024 Sharpest
Powered by .NET 9.0 on Kubernetes Powered by: 博客园