JqGrid学习总结_7 分组Grouping

1、在使用jqgrid时，我们往往需要根据某一列的值进行分组

  jqGrid 属性官网：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options

  下面只是一个简单的分组例子，关于分组更深层次的学习，

   可以参考JqGridDemo的Grouping栏 :http://trirand.com/blog/jqgrid/jqgrid.html

2、分组实例：

jQuery("#list483").jqGrid({ 

 data:mydata, 

 datatype:"local",//这里使用的是本地数据，也可以从后台传入数据

 height:'auto', 

 rowNum: 30,rowList: [10,20,30], 

 colNames:['InvNo','Date', 'Client'], 

 colModel:[{name:'id',index:'id', width:60, sorttype:"int"},

         {name:'invdate',index:'invdate', width:90, }, 

          {name:'name',index:'name',width:100}]

 pager:"#plist483", 

 viewrecords:true, 

 sortname:'name', 

 grouping:true,

 groupingView :{

   groupField : ['name'], //分组字段

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

   groupText : ['{0} - {1}Item(s)'] 

      //分组标题，{0}代表的是组名，{1}代表的是本组的总数，同时设置这个属性可以使组名字体加粗

    },   

//更多关于groupingView属性 对表格进行设置官网：

 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:grouping                        

   caption: "Configure group headerrow" 

});

var mydata = [{id:"1",invdate:"2010-05-24",name:"test"} ,

            {id:"2",invdate:"2010-05-25",name:"test2"}, 

            {id:"3",invdate:"2007-09-01",name:"test3"},

            {id:"4",invdate:"2007-10-04",name:"test"}, 

            {id:"5",invdate:"2007-10-05",name:"test2"}, 

            {id:"6",invdate:"2007-09-06",name:"test3"},

            {id:"7",invdate:"2007-10-04",name:"test"}

分组图：