1. 全栈程序员必看首页

jqGrid基本用法与示例「建议收藏」

全栈程序员-用户IM • • 未分类

jqGrid基本用法与示例「建议收藏」转自：https://chuanlu.iteye.com/blog/1953544一、jqGrid的基本用法1、html页面Html代码<!DOCTYPE html 

大家好，又见面了，我是你们的朋友全栈君。

转自：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

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/155708.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

赞 (0)
全栈程序员-用户IM全栈程序员-用户IM
0 0
blank

相关推荐

  • FPGA之ODDR「建议收藏」

    FPGA之ODDR「建议收藏」

    通过oddr把两路单端的数据合并到一路上输出上下沿同时输出数据上沿输出a路下沿输出b路 如果两路输入信号一路恒定为1，一路恒定为0，那么输出的信号实际上就是输入的时钟信号ODDRPrimitive:Adedicatedoutputregistertotransmitdualdatarate(DDR)signalsfromV

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年4月7日
  • 在centos7上安装夜莺监控

    在centos7上安装夜莺监控

    在centos7上安装夜莺监控所需包（仅作参考）在/opt目录下建立目录/n9e和/temp安装包存放在/opt/temp目录下mysql-5.7.31-linux-glibc2.12-x86_64.7znginx-1.14.2.7zp7zip-16.02-10.el7.x86_64.rpmredis-6.0.6.7zn9e-2.7.2.7z1.安装7zrpm-ivhp7zip-16.02-10.el7.x86_64.rpmyum-yinstallepel-releaseyum-yi

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年5月30日
  • 在目录下打开命令行_如何用命令行打开文件夹

    在目录下打开命令行_如何用命令行打开文件夹

    在目录下打开命令行_如何用命令行打开文件夹用命令行打开指定目录。基本指令nautilus+路径命令可以在ubuntu上直接打开此路径的目录。如nautilus~/workspace/。打开win格式的路径在Windows上的路径为反斜线\，在ubuntu命令行是无法识别的，此时需要将\转换为/。使用sed命令可以自动转换。以下命令可以打开/home/eric.cai/Workspace/目录：nautilus$(echo’\home\eric.cai\Workspace’|sed‘s+\\+/+g’)写成

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年10月15日
  • TCP端口检测、网络连接时延测试工具 tcping

    TCP端口检测、网络连接时延测试工具 tcping

    TCP端口检测、网络连接时延测试工具 tcping原文地址：https://zhangnq.com/3158.html在主流的linux系统中，通过yum或者apt也可安装tcping，不过通过源安装的tcping只能显示单次检测的结果，也没有具体的连接时延。现参考windows版tcping，用python写了一个linux环境下的类似工具。代码建立socket连接，测试端口连通性和网络连接时延。deftcp(ip,por…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年6月23日
  • 她不在

    她不在

    她不在她不在

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年4月23日
  • js 图片加载失败处理方法「建议收藏」

    js 图片加载失败处理方法「建议收藏」

    js 图片加载失败处理方法「建议收藏」个人github：https://github.com/qiilee 欢迎follow在项目中不可避免会用到图片，尤其是列表，有时候图片会加载失败；这样就会显示一个很难看的坏图片缩略图；下面介绍两种方法，解决这个问题：1、如果在你的项目中有引入jQuery插件，你可以使用error([[data],fn])这个函数；$("img").error(function(){　　//当图…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年6月2日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号