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


相关推荐

  • Node.js【2】开发环境搭建（Windows、Linux&amp;Mac）

    Node.js【2】开发环境搭建（Windows、Linux&amp;Mac）

    Node.js【2】开发环境搭建（Windows、Linux&amp;Mac）

    全栈程序员-用户IM 全栈程序员-用户IM
    2021年11月29日
  • django的orm查询方法_查看django版本命令

    django的orm查询方法_查看django版本命令

    django的orm查询方法_查看django版本命令前言查找是数据库操作中一个非常重要的技术。查询一般就是使用filter、exclude以及get三个方法来实现。我们可以在调用这些方法的时候传递不同的参数来实现查询需求。在ORM层面，这些查询条件都

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年8月7日
  • 手机怎么识别图片上的文字「建议收藏」

    手机怎么识别图片上的文字「建议收藏」

    手机怎么识别图片上的文字「建议收藏」 识别提取文字的方法有很多，大家平时也都会使用到自己的方法，但是你所使用到的方法是不是简单而且识别效果很不错呢？其实手机里有很多的识别转换工具，但是很多的识别效果都不如人意，小编最近发现的一个简单有效的方法，一起来看看吧。1.首先在应用市场里找到如下的拍照识别文字工具，然后将其运行。2.在主页点击右下角的蓝色加号按钮然后会出现两个蓝色的小图标，分别是相册和相机，在此选择相机。…

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年6月12日
  • pycharm快捷键和常规设置[通俗易懂]

    pycharm快捷键和常规设置[通俗易懂]

    pycharm快捷键和常规设置[通俗易懂]记录下我常用的pycharm快捷键和设置（Windows10）1、更换背景：文件—设置—-外观与行为—外观—背景图像本来是没想到设置背景图像的。脑子一抽换了一个，感觉发现了新大陆。（程序员鼓励师）2、列模式Alt+Shift+鼠标左键可以批量选中并修改3、Ctrl+E打开最近文件。多用于打开了多个文件时快速定位。也可以在tab标签里找，不过tab打开多了就会挤压之前标签，看起来特别费劲。4、Ctrl+B快速定位变量在哪定义的快速定位函数定义代码5、Shift+Enter

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年8月27日
  • 好玩的智力小游戏（海盗分金）

    好玩的智力小游戏（海盗分金）

    好玩的智力小游戏（海盗分金）

    全栈程序员-用户IM 全栈程序员-用户IM
    2022年1月25日
  • 机器学习方法：回归（三）：最小角回归Least Angle Regression（LARS），forward stagewise selection

    机器学习方法：回归（三）：最小角回归Least Angle Regression（LARS），forward stagewise selection

    机器学习方法：回归（三）：最小角回归Least Angle Regression（LARS），forward stagewise selection前面两篇回归（一）（二）复习了线性回归，以及L1与L2正则——lasso和ridgeregression。特别描述了lasso的稀疏性是如何产生的。在本篇中介绍一下和lasso可以产生差不多效果的两种方法：stagewise和LARS

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

发表回复

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

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