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

- 日理万妓 2022-06-14 02:41 191阅读 0赞

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里的内容是分组的字段名