jqGrid页头分组

通用规则

页头分组就是在表头行上增加附加的列,将需要分组列归并到一起,效果如下

jqGrid页头分组

  有2种类型的分组方式,colSpan启用或者禁用。默认为禁用,没有分组的列表头上增加一个空白的行,如上所示的Notes列。启用colSpan,那么不会在没有分组的列上增加空白行,此列的表头作为一个整体(如上面的Notes列的2行合并到一起,如最下面那张图所示)

 

下面将介绍如何配置

限制

  • 可排序的列(Sortable columns)和页头分组不兼容,所以只能使用其中一种功能,不能2者同时使用
  • 列选择插件(Column Chooser) 和页头分组不兼容

如何使用页头分组

页头分组需要在grid创建有才能使用,调用 setGroupHeaders.方法。

示例代码如下

...
jQuery("#grid").jqGrid({
...
   colNames: ['Date', 'Client', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],
   colModel: [
         {name: 'invdate', index: 'invdate', width: 80, align: 'center', sorttype: 'date',
            formatter: 'date', formatoptions: {newformat: 'd-M-Y'}, datefmt: 'd-M-Y'},
         {name: 'name', index: 'name', width: 70 },
         {name: 'amount', index: 'amount', width: 75, formatter: 'number', sorttype: 'number', align: 'right'},
         {name: 'tax', index: 'tax', width: 75, formatter: 'number', sorttype: 'number', align: 'right'},
         {name: 'total', index: 'total', width: 75, formatter: 'number', sorttype: 'number', align: 'right'},
         {name: 'closed', index: 'closed', width: 75, align: 'center', formatter: 'checkbox',
            edittype: 'checkbox', editoptions: {value: 'Yes:No', defaultValue: 'Yes'}},
         {name: 'ship_via', index: 'ship_via', width: 100, align: 'center', formatter: 'select',
            edittype: 'select', editoptions: {value: 'FE:FedEx;TN:TNT;IN:Intim', defaultValue: 'Intime'}},
         {name: 'note', index: 'note', width: 70, sortable: false}
    ],
    rowNum: 10,
    rowList: [5, 10, 20],
 ...
});
jQuery("#grid").jqGrid('setGroupHeaders', {
  useColSpanStyle: false, 
  groupHeaders:[
	{startColumnName: 'amount', numberOfColumns: 3, titleText: '<em>Price</em>'},
	{startColumnName: 'closed', numberOfColumns: 2, titleText: 'Shiping'}
  ]
});

setGroupHeaders方法参数说明

  此方法用于创建页头分组。调用此方法后,创建页头分组的参数将会存储到grid的参数中,这个参数为:groupHeader ,可以通过 getGridParam 方法获取(前提是没有调用过destroyGroupHeader ,参考下面)
 

参数 类型 描述 默认值
useColSpanStyle boolean 上面介绍的colSpan。定义没有分组的列表头上是否增加一个空白的行, false添加空白行,否则此列的表头作为一个整体 false
groupHeaders array 数组,配置页头分组显示的内容和规则,可用值如下表如下所示 empty
groupHeaders参数配置
配置 类型 描述
startColumnName string colModel中的name值,页头分组开始的列
numberOfColumns integer 页头分组的列数。包含startColumnName配置的列。如果遇到隐藏的列,不包含此列列头,但是还是计算到总数里面
titleText string 页头分组显示的内容,可以包含html标签

使用上面的示例,将 useColSpanStyle 设置为true,效果如下图所示

jQuery("#grid").jqGrid('setGroupHeaders', {
  useColSpanStyle: true, 
  groupHeaders:[
	{startColumnName: 'amount', numberOfColumns: 3, titleText: '<em>Price</em>'},
	{startColumnName: 'closed', numberOfColumns: 2, titleText: 'Shiping'}
  ]
});

	

jqGrid页头分组

销毁页头分组

  调用 destroyGroupHeader 方法可以销毁页头分组,此方法返回表格页头的原始状态,示例如下

jQuery("#grid").jqGrid('destroyGroupHeader');

此方法有一个可选的参数,布尔变量,默认值为true。如果设置为false

jQuery("#grid").jqGrid('destroyGroupHeader', false);

将还原表格的初始化表头,但是不会销毁已经创建的页头分组选项。就是所销毁页头分组后,最后一次的页头分组参数还可以再次使用。( With other words the last group header parameters can be used later instead that the group header is destroyed)

来源:http://www.trirand.com/jqgridwiki/doku.php?id=wiki:groupingheadar

 


原创文章,转载请注明出处:jqGrid页头分组

评论(0)Web开发网
阅读(3943)喜欢(2)不喜欢(0)jqGrid中文API