• 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', 55},   
    11.         {name:'invdate',index:'invdate', 90},   
    12.         {name:'name',index:'name asc, invdate', 100},   
    13.         {name:'amount',index:'amount', 80, align:"right"},   
    14.         {name:'tax',index:'tax', 80, align:"right"},   
    15.         {name:'total',index:'total', 80,align:"right"},   
    16.         {name:'note',index:'note', 150, sortable:false}   
    17.     ],  
    18.     // 一页显示的行记录数  
    19.     rowNum:10,   
    20.     // 表格宽度  
    21.     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
  • 相关阅读:
    （三）数据预处理过程简介
    （二）数据挖掘需要哪些技术
    （一） 什么是数据挖掘？
    怎样提问呢？
    什么是自我意识
    高效能人士的七个习惯
    “U”型读书法
    CMDB学习之一
    层级选择器
    css选择器
  • 原文地址：https://www.cnblogs.com/sharpest/p/10576813.html
Copyright © 2020-2023  润新知