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

时间：2023-01-03 15:07:44

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']}
（2）groupField里的内容是分组的字段名


标签：

相关文章