关于jqGrid中的分组功能
来源:互联网 发布:python x y 下载 编辑:程序博客网 时间:2024/06/05 14:55
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>
- 关于jqGrid中的分组功能
- Jqgrid入门-Jqgrid分组的实现(八)
- 关于JqGrid
- 分组grid插件jqgrid研究
- 关于分组序号在MySQL中的实现
- 关于分组序号在MySQL中的实现
- 关于sql中的按年月日分组
- jqgrid 编辑添加功能
- jqgrid添加时间功能
- Jqgrid 底部合计功能
- jqgrid实现行拖拽功能
- jqGrid 排序功能
- jqgrid常用功能 详解
- jqGrid表头排序功能
- jqgrid根据数据分组情况选定checkbox
- JqGrid学习总结_7 分组Grouping
- 关于jqgrid使用记录
- 关于分组
- linux 工作队列
- [nginx] 巧用NGINX日志格式来分析网站访问速度与瓶颈
- JqGrid实现分页相关
- 基础知识之数据分析与动态采样
- 为什么Latex中的International(WinEdt 6.0)部分符号编译出错:invalid in math mode on input
- 关于jqGrid中的分组功能
- 人生的七次机会
- 转:写程序的注意点
- 基础知识之生成直方图的重要性
- 对话框知识点和函数(二)
- SQL01268 CREATE ASSEMBLY 失敗
- 基础知识之分区表全局信息与分区信息的相互影响
- 对话框知识点和函数(三)
- jqGrid表头锁列及排序功能细节