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'} ] });
销毁页头分组
调用 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页头分组