类似于Sql语句的Group By,Jqgrid提供了属性实现数据分组,这样表现数据会显得比较直观。先上个效果图:
从图上我们可以很直观的看出,数据是根据家庭住址分的组,并且能够很直观的看出每个分组里面有多少信息量。要实现这个功能并不难
grouping : true,// 是否分组,默认为false
groupingView : {
groupField : [ 'address' ], // 按照哪一列进行分组
groupColumnShow : [ true ],// 是否显示分组列
groupText : [ '<b>{0} - {1} 条记录</b>' ],// 表头显示的数据以及相应的数据量
groupCollapse : false,// 加载数据时是否只显示分组的组信息
groupDataSorted : true,// 分组中的数据是否排序
groupOrder : [ 'asc' ],// 分组后的排序
groupSummary : [ true ],// 是否显示汇总.如果为true需要在colModel中进行配置
summaryType : 'max',// 运算类型,可以为max,sum,avg</div>
summaryTpl : '<b>Max: {0}</b>',
showSummaryOnHide : true//是否在分组底部显示汇总信息并且当收起表格时是否隐藏下面的分组
复制代码以后,刷新页面就能看到效果了。
jqGrid中分组用到的列进行了formatter后,在groupingView的groupText {0...
groupText: ['{0} - {1} 条记录'], \/\/ {0}:分组的值,{1}总数据量 {0},{1} 是默认的。如果需要其他的{xxx} 必须是汇总字段的值。否则就会出现undefined