1、问题场景
(1)利用jqGrid生成表格
(2)表格按照字段name进行分组
2、实现源码
- <!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分组需要添加两个属性
- grouping:true,
- groupingView : {
- groupField : ['name']
- }