欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jqGrid 常用 总结 -1

程序员文章站 2022-04-24 22:42:27
这篇文章是因为,我们在做的后台项目,里面有大量的表格统计,这个不可能自己手写,所以其中的表格使用的是jqgrid。 这个插件其实使用起来还是不错的,里面有很多的功能很赞。这篇博客就是自己的的一个记录,也是对以后项目的一个参考。因为有一些代码总是记不住。 首先就是引入这个插件所需要的js和css了,这 ......

  这篇文章是因为,我们在做的后台项目,里面有大量的表格统计,这个不可能自己手写,所以其中的表格使用的是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是总数据量。

jqGrid 常用 总结 -1

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

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,这样就能再次获取到全部的数据。(以上的这种情况适用于数据量不是很大,数据都是一次加载,但是还有条件筛选的功能的程序。)

  未完待续……