注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天涯倦客的博客

祝福你朋友永远快乐!

 
 
 

日志

 
 

关于jqGrid中的分组功能  

2017-05-05 16:41:11|  分类: JQuery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

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> 

  评论这张
 
阅读(45)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017