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

来源：互联网发布：查找淘宝用户购买记录编辑：程序博客网时间：2024/06/05 02:03

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

阅读全文

0 0