jqGrid 常用总结 -1

2018-12-19 01:44:56来源：博客园阅读 ()

　　这篇文章是因为，我们在做的后台项目，里面有大量的表格统计，这个不可能自己手写，所以其中的表格使用的是jqgrid。

　　这个插件其实使用起来还是不错的，里面有很多的功能很赞。这篇博客就是自己的的一个记录，也是对以后项目的一个参考。因为有一些代码总是记不住。

首先就是引入这个插件所需要的js和css了，这个相信大家都不陌生，这个插件是基于jq的所以之前要引入jq，这个不详细的赘述了。然后就是他的基本结构，很简单，就是一个两个标签，一个是表格的内容，一个是翻页功能。

1 <div class="jqGrid_wrapper">
2       <table id="table_list_1"></table>
3       <div id="pager_list_1"></div>
4  </div>

table_list_1为这个表格的主要显示内容，而pager_list_1是显示翻页的地方，当然了， 如果你没有翻页的话，这个是可以不要的。
然后是比较重要的一部分了，我这里直接粘贴代码过来，然后在做解释。

 1 $("#table_list_1").jqGrid({
 2                     url:'__URL__/data_search',
 3                     postData:{},
 4                     datatype: "json",
 5                     mtype: 'POST',
 6                     height: 450,
 7                     autowidth: true,
 8                     shrinkToFit: true,
 9                     rowNum: 14,
10                     rowList: [10, 20, 30],
11                     colNames: ['日期', '比赛id', '比赛名称', '比赛报名人数', '比赛参与人数','比赛名次列表'],
12                     colModel: [
13                         {
14                             name: 'datetime',
15                             index: 'datetime',
16                             width: 60,
17                             sorttype: "int",
18                             sortable: false,
19                             align:'center'
20                         },
21                         {
22                             name: 'match_id',
23                             index: 'match_id',
24                             width: 60,
25                             sorttype: "int",
26                             sortable: false,
27                             align:'center'
28                         },
29                         {
30                             name: 'match_name',
31                             index: 'match_name',
32                             width: 60,
33                             sorttype: "int",
34                             sortable: false,
35                             align:'center'
36                         },
37                         {
38                             name: 'signup_user_num',
39                             index: 'signup_user_num',
40                             width: 60,
41                             sorttype: "int",
42                             sortable: false,
43                             align:'center'
44                         },
45                         {
46                             name: 'vaild_user_num',
47                             index: 'vaild_user_num',
48                             width: 60,
49                             sorttype: "int",
50                             sortable: false,
51                             align:'center',
52                             formatter:function(data){
53                                 if(data){
54                                     return data;
55                                 }else{
56                                     return "/";
57                                 }
58                             }
59                         },
60                         {
61                             name: 'isfinish',
62                             index: 'isfinish',
63                             width: 60,
64                             formatter: function() {
65                                 return '<input class="btn btn-w-m btn-info" type="button" value="详情" onclick="getdata(this)"/>';
66                             },
67                             align:'center'
68                         }
69                     ],
70                     pager: "#pager_list_1",
71                     loadonce: true,
72                     viewrecords: true,
73                     caption: "比赛情况",
74                     hidegrid: false
75                 });

这里的url是我们这个表格里面的数据的接口，当然了也可以用ajax请求回来数据之后，在添加进去。下面会说到这种办法。

1.loadonce

　　首先说下一，我被坑的最多的一个地方，就是上面的71行代码中的一个，叫做loadonce 的属性，我先把官方说明放在下面： “如果为ture则数据只从服务器端抓取一次，之后所有操作都是在客户端执行，翻页功能会被禁用”。其实这句话表述的前半句是正确的，只从服务器加载一次数据，然后所有的操作都是在客户端执行，但是，翻页功能不是被禁用了。如果一次请求回来了，1000条数据，但是每页只显示100条的话，还是会有分页的，只是这个时候，分页功能是前端完成的，不会再次请求服务器了。这也是我们通常说的假分页。

　　如果你们的数据量真的很大的话，一下子全部把数据给前端这种方法肯定是不可以的，肯定是需要真正的分页功能，让后台服务器，每次只返回对应的页数的数据，然后前端加载，这样的话，loadonce可以设置为false。这里还有一点需要注意的是，如果是真分页的话，jqgrid回检查一个参数，这个参数是全部的数据量，只有得到了这个参数，jqgrid才能正确的显示总页数，还有就是每次请求的page页。这个就需要一个jsonReader 属性来标识服务器返回的字段和jqgrid默认的字段来一一对应。（最好让你们的服务器返回的就按照jqgrid这样直接返回，这样就不需要一一对应了。）

jsonReader : {   

     root: "rows",
       
     page: "page",
       
     total: "total",
       
     records: "records",
       
     repeatitems: true,
       
     cell: "cell", 
       
     id: "id",
        
     userdata: "userdata",
       
     subgrid: {
     
         root:"rows",
        
        repeatitems: true,
           
           cell:"cell"
         
     }

放一个我们现在后台返回的数据格式，直接看图片吧，相信大家一看就能明白，total是总页数，records是总数据量。

这个截图就是后台返回的数据格式，我们不用整理。如果后台不是这样的格式，那么按照上面的自己整理。

2.数据格式化和自定义--formatter

　　因为是列表，会遇到很种数据格式，但是后台返回的不一定是能直接显示在页面上的，有的可能需要前端自己处理一下数据。比如后台给返回了一个时间戳，但是我们需要把他显示成正确的时间格式，或者，后台返回的是0和1，但是0代表的是未通过，而1表示是通过，这个时候就需要前端格式化数据。我们用到的就是formatter

1 {
2　　name:"order_id",
3　　width:160,
4　　formatter: function(cellvalue,options,rowObject){
5　　　　return act_formatter(rowObject);
6　　　　console.log(rowObject);
7　　}
8},

这里面我们是直接写的一个函数，其中会有三个参数，我们一般常用的就是cellvalue，和rowObject这两个。其中，只有你的name和返回的数据中的json的键名对应起来的话，这里cellvalue就是返回的这个键值。这个时候我们就能直接写if判断，然后return返回就可以了。如果你想着得到其他的数据，可以写一个name是在返回的数据中没有对应的键名的，这样，rowObject就能得到这一行的所有的数据了，这里我们可以尝试着打印一遍数据就可以了。

其中我比较常用的是return整个行，也就是数据全部在act_formatter这个函数中，下面我把这个函数写在下面。

function act_formatter(rowObject){ //操作中需要的格式化按钮
                var ags = '';
                for(a in rowObject){
                    ags += a+'="'+''+rowObject[a]+'" ';
                }
                var str = "";
                str += '<input onclick="change(this)" '+ags+' type="button" value="删除"  data-toggle="modal" data-target="#delModal2" class="btn btn-danger" /> ';
                str += '<input onclick="change(this)" '+ags+' type="button" value="注销"  data-toggle="modal" data-target="#delModal" class="btn btn-danger" /> ';
                str += '<input onclick="free(this)" '+ags+' type="button" value="续费"  data-toggle="modal" data-target="#" class="btn  btn-success" /> ';
                str += '<input onclick="free_img(this)" '+ags+' type="button" value="图片服务"  data-toggle="modal" data-target="#" class="btn  btn-success" /> ';
                str+="</br>"
                //str += '<input onclick="watch_free(this)" '+ags+' type="button" value="支付链接"  data-toggle="modal" data-target="#newModal8" class="btn  btn-success" /> ';
                //console.log(is_break);
                
                    //if(is_break==1){ //是否断开微信
                        str += '<input onclick="change_gid_type(this)" '+ags+' class="btn btn-info" type="button" data-toggle="modal" data-target="#newModal5" value="修改"  />';
                    //}else if(is_break==0){
                        str += '<input onclick="get_check(this)" '+ags+' class="btn btn-info" type="button" data-toggle="modal" data-target="#" value="绑定微信"  />';
                    //}else if(is_break==2){

                    //}
                str +=     '<input onclick="settime(this)" '+ags+' type="button" value="设置"  data-toggle="modal" data-target="#newModal9" class="btn btn-info" /> ';
                return str;    
            }

这段代码是在一行表的最后，会有一列是操作按钮，这个时候，会需要表格中比较多的数据，当然了，我们可以只添加上需要的这一条数据，也可以把这个表的所有的数据都添加上。这样比较方便我们操作。然后里面的函数，比如change（this），然后里面写入

$(t).attr("pid")这个就能得到相应的值。

　　上面的比较通用的方法，不管是怎么格式数据，都可以用的，其实jqgrid是自带格式化数据的，但是样式有限，我用的比较多的一个是保留两位小数。当然了这个功能用咱们上面的办法，肯定是可以的。但是我们也要了解一下jqgrid 的用法。

1 {
2                 name:'accounted_data',
3                 align : 'center',
4                 formatter:"number",
5                 formatoptions:{
6                     decimalPlaces:2
7                 },
8             }

“number”就是会把这一列当做数字处理，然后下面的formatoptions是这个数字的选项。decimalPlaces是保留的小数位数，我写的2就是保留两位小数(这里需要注意的是，直接写上2就行了，不要加引号)，当然了，这里面还有其他的用法，附上一个链接，大家自己去看去实践。

3.重新加载数据

　　重新加载数据，其实用的比较多，通常就是因为表格中的数据量比较大，不能直观的看需需要的数据，所以就需要筛选一下数据，增加筛选条件，然后重新加载一遍数据。如果是加载本地的数据的话，其实就跟jqgrid没有什么太大的关系了，只需要清楚一遍数据，然后重新加载就好了。不过大部分的情况不是这样的，是直接要把所需要的数据传给jqgrid，然后加载数据的，这个也很简单，跟jq的ajax基本上没有什么区别，直接给出相应的代码。

1                     $("#table_list_1").jqGrid("clearGridData");
2                             
3                     $("#table_list_1").setGridParam({
4                         postData:{
5                             start_date:data1,
6                             end_date:data2
7                         }
8                     }).trigger("reloadGrid");

第一行的代码是清楚原来的数据，这个不管是加载本地的数据，还是直接调用jqgrid的方法，都是需要的。然后第4行开水奇偶需要重新加载的数据了，比如例子中就是靠开始时间和结束时间筛选的。这样的话，就可以正常的加载数据了。

　　但是需要注意的一点是，我上次遇到了一次情况，发现程序不会重新加载数据，就是因为我们那次的数据量比较小，都是使用的loadonce：true这个属性，然后我改变筛选条件以后，jqgrid不会重新的请求数据了，，，，，这个让我很诧异，结果百度以后得知，当我们设置jqgrid的loadonce:true的时候，其实他会把一个属性，datatype重新设置成local，所以这个时候jqgrid就不会重新的加载一遍数据了，所以我们还需要再次加载全部数据的时候设置一下，datatype：json，这样就能再次获取到全部的数据。（以上的这种情况适用于数据量不是很大，数据都是一次加载，但是还有条件筛选的功能的程序。）

　　未完待续……

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有