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

xiaoxiao2021-02-28  88

1、问题场景

     (1)利用jqGrid生成表格

     (2)表格按照字段name进行分组

2、实现源码

[html]  view plain  copy  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 plain  copy  print ? grouping:true,   groupingView : {       groupField : ['name']   }   (2)groupField里的内容是分组的字段名
转载请注明原文地址: https://www.6miu.com/read-68709.html

最新回复(0)