如何给jqGrid表格按照字段进行分组

最新推荐文章于 2021-01-04 21:36:31 发布

Tianya_追心

最新推荐文章于 2021-01-04 21:36:31 发布

阅读量636

点赞数

分类专栏：技术，研发

技术，研发专栏收录该内容

48 篇文章 0 订阅

订阅专栏

1、问题场景

（1）利用jqGrid生成表格

（2）表格按照字段name进行分组

2、实现源码

[html]view plaincopy 
   
print?
 <!DOCTYPE html>  
 <html>  
     <head>  
         <meta charset="UTF-8">  
         <title></title>  
         <link rel="stylesheet" href="../css/ui.jqgrid-bootstrap-ui.css" />  
         <link rel="stylesheet" href="../css/ui.jqgrid-bootstrap.css" />  
         <link rel="stylesheet" href="../css/ui.jqgrid.css" />  
         <script src="../js/jquery-1.11.0.min.js"></script>  
         <script src="../js/jquery.jqGrid.min.js"></script>  
         <script src="../js/i18n/grid.locale-cn.js"></script>  
         <script>  
             $(function(){  
                  var mydata = [  
                     {id:"1",name:"1号"},  
                     {id:"2",name:"2号"},  
                     {id:"3",name:"3号"},  
                     {id:"4",name:"1号"},  
                     {id:"5",name:"2号"},  
                     {id:"6",name:"3号"},  
                     {id:"7",name:"1号"},  
                     {id:"8",name:"2号"},  
                     {id:"9",name:"3号"}  
                   ];  
                   
                 jQuery("#column").jqGrid({  
                     data: mydata,  
                     datatype: "local",  
                     height: 'auto',  
                     rowNum: 30,  
                     rowList: [10,20,30],  
                     colNames:['编号','名称'],  
                     colModel:[  
                         {name:'id',index:'id', width:300, sorttype:"int"},  
                         {name:'name',index:'name', width:900,editable:true}  
                     ],  
                     pager: "#columnPager",  
                     viewrecords: true,  
                     sortname: 'name',  
                     grouping:true,  
                     groupingView : {  
                         groupField : ['name']  
                     },  
                     caption: "分组"  
                 });  
             });  
         </script>  
     </head>  
     <body>  
         <div>  
             <table id="column"></table>  
             <div id="columnPager"></div>  
         </div>  
     </body>  
 </html>  

3、问题说明

（1）jqGrid分组需要添加两个属性

[plain]view plaincopy 
   
print?
 grouping:true,  
 groupingView : {  
     groupField : ['name']  
 }  

（2）groupField里的内容是分组的字段名

Tianya_追心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何给jqGrid表格按照字段进行分组

1、问题场景（1）利用jqGrid生成表格（2）表格按照字段name进行分组2、实现源码[html] view plain copy print?> html> head> meta charset="UTF-8"> tit
复制链接

扫一扫

专栏目录