jqGrid基本用法与示例

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

一、jqGrid的基本用法

 

1、html页面

 

Html代码   收藏代码
  1. >  
  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-testtitle>  
  6.   
  7. <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/start/jquery-ui.css" />  
  8.   
  9. <link rel="stylesheet" type="text/css" href="/resources/css/ui.jqgrid.css" />  
  10.   
  11. <script type="text/javascript" src="/resources/scripts/libs/jquery-1.10.2.min.js">script>  
  12.   
  13. <script type="text/javascript" src="/resources/scripts/libs/jquery.jqGrid.min.js">script>  
  14.   
  15. <script type="text/javascript" src="/resources/scripts/i18n/grid.locale-cn.js">script>  
  16.   
  17. <script type="text/javascript" src="/resources/scripts/init.js">script>  
  18. head>  
  19. <body>  
  20.   
  21. <table id="list">table>  
  22.   
  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

转载于:https://www.cnblogs.com/sharpest/p/10576813.html

你可能感兴趣的:(jqGrid基本用法与示例)