关于jqGrid中的分组功能

最新推荐文章于 2019-05-28 07:22:41 发布

原创最新推荐文章于 2019-05-28 07:22:41 发布 · 置顶 · 1.2w 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#java #Java #JAVA #jqgrid #jqGrid #jQgrid #web前端 #Web前端 #分组

web技术专栏收录该内容

6 篇文章

订阅专栏

本文介绍了jqGrid的分组功能，详细解析了相关属性如grouping、groupField、groupColumnShow等，并提供了分组设置的示例代码，展示了如何根据地址和年龄进行数据分组，并在分组头部显示每组记录数量。此外，还提到了如何在分组中显示汇总信息和排序分组数据。

jqGrid为数据提供了分组的功能，该分组可以根据相应的一列的信息进行分组，同时也可以根据多列的数据进行分组。如图：

图1、根据地址和年龄信息进行分组并显示每组中记录的数量

相关属性：

grouping:true,

groupingView : {

groupField : ['address','age'],//分组属性

groupColumnShow : [true,true],//是否显示分组列

groupText : ['<b>{0} - {1} 条记录</b>'],//表头显示数据(每组中包含的数据量)

groupCollapse :false,//加载数据时是否只显示分组的组信息

groupSummary : [true,false],//是否显示汇总如果为true需要在colModel中进行配置summaryType:'max',summaryTpl:'<b>Max: {0}</b>'

groupDataSorted : true,//分组中的数据是否排序

groupOrder:['desc','desc'] , //分组后组的排列顺序

//showSummaryOnHide: true//是否在分组底部显示汇总信息并且当收起表格时是否隐藏下面的分组

属性解释：

grouping:t jqGrid中该属性默认为false，但需要进行分组的时候将该属性设置为true

groupField :该属性表示分组的依据，可以跟据某一列的信息进行分组，也可以根据多列进行分组

groupColumnShow :该属性表示依据其分组的列是否还显示在表中 true表示显示，false表示不显示，默认为true.

groupText :在分组的头部显示的信息

groupCollapse :该属性表示在加载数据的时候是否只显示分组信息，false表示既显示分组信息也显示每个分组里面的详细信息，true则只显示分组信息

groupSummary :该属性表示对分组里面的信息进行分析，如果为true需要在colModel中进行配置summaryType:'max',summaryTpl:'<b>Max: {0}</b>'

groupDataSorted：表示分组中的数据是否进行排序

groupOrder: //分组后组的排列顺序

showSummaryOnHide: true//是否在分组底部显示汇总信息并且当收起表格时是否隐藏下面的分组

页面源码如下：

<scripttype="text/javascript">

$.jgrid.no_legacy_api =true;

$.jgrid.useJSON =true;

</script>

<scripttype="text/javascript">

$(function(){

$("#grid_id").jqGrid({

url:'doexecute.action?str=id',

mtype: 'post',

datatype:'json',

height: "auto",

width:800,

loadui:"disable",

colNames:['姓名', '年龄','地址'],

colModel: [

{name:'name',index:'name', width:150, sorttype:"string",editable:true ,summaryType:'count', summaryTpl : '({0})total',frozen:true},

{name:'age',index:'age', width:120,sorttype:"int",editable:true, summaryType:'max',summaryTpl:'<b>Max: {0}</b>',frozen:true},

{name:'address',index:'address',width:150,sorttype:"string",editable:true}

pager:'#pager',

rowNum:10,

rowList:[10,20,30],

sortname:'name',

sortorder:'asc',

viewrecords:true,

multiselect:true,//是否支持多选

grouping:true,

groupingView : {

groupField : ['address','age'],//分组属性

groupColumnShow : [true,true],//是否显示分组列

groupText : ['<b>{0} - {1} 条记录</b>'],//表头显示数据(每组中包含的数据量)

groupCollapse :false,//加载数据时是否只显示分组的组信息

groupSummary : [true,false],//是否显示汇总如果为true需要在colModel中进行配置summaryType:'max',summaryTpl:'<b>Max: {0}</b>'

groupDataSorted : true,//分组中的数据是否排序

groupOrder:['desc','desc'] , //分组后组的排列顺序

//showSummaryOnHide: true//是否在分组底部显示汇总信息并且当收起表格时是否隐藏下面的分组

footerrow:true,

userDataOnFooter:true,

jsonReader:{root:"list",

page:"page" ,

total:"totalPage",

records:"totalRecords",

repeatitems : false

caption: '员工信息'

});

jQuery("#grid_id").jqGrid('navGrid','#pager',{add:true,edit:true,view:true,del:true,search:true,refresh:true},

{url:'doexecute.action?str=id',closeAfterEdit:true, closeOnEscape:true, left:240},

{url:'doexecute.action?str=id',closeAfterAdd:true, closeOnEscape:true,left:240},

{url:'doexecute.action?str=id',closeAfterEdit:true, closeOnEscape:true,top:90, left:240, resize:false, drag:false},

{url:'doexecute.action?str=id',multipleSearch:true,closeAfterSearch:true, closeOnEscape:true, sopt:['le','ge','bw']},

{closeOnEscape:true,left:240}

);

jQuery("#grid_id").jqGrid('setGroupHeaders', {//显示报表头部信息

useColSpanStyle: false,

groupHeaders:[

{startColumnName:'name', numberOfColumns:2, titleText: '<em>个人基本信息</em>'},

{startColumnName:'address', numberOfColumns: 1, titleText: '个人住址信息'}

]

});

jQuery("#grid_id").jqGrid('setFrozenColumns');

});

</script>

</head>

<body>

<tableid="grid_id"></table>

<divid="pager"></div>

</body>