ExtJS3 - 如何实现多表头Grid

ExtJS 3.x 版本并没有直接实现多表头Grid 的方式,可借助ColumnHeaderGroup插件进行实现,该插件代码已包含在项目源码包中的ux目录下。


1、引入ColumnHeaderGroup插件的css及js文件

<head>
	<meta charset="utf-8" />
	<title>ColumnHeaderGroup Grid</title>
	<link rel="stylesheet" type="text/css" href="extjs/css/ext-all.css" />
	<link rel="stylesheet" type="text/css" href="extjs/css/xtheme-blue.css" />
	<link rel="stylesheet" type="text/css" href="extjs/ux/ColumnHeaderGroup.css" />
	<script type="text/javascript" src="extjs/ext-base.js"></script>
	<script type="text/javascript" src="extjs/ext-all.js"></script>
	<script type="text/javascript" src="extjs/ux/ColumnHeaderGroup.js"></script>
</head>


2、创建ColumnHeaderGroup对象实例

				var row = new Ext.ux.grid.ColumnHeaderGroup({
					rows: [
						[{
							header: "",
							align: "center",
							colspan: 1
						}, {
							header: "A",
							align: "center",
							colspan: 1
						}, {
							header: "B",
							align: "center",
							colspan: 2
						}, {
							header: "C",
							align: "center",
							colspan: 3
						}, {
							header: "D",
							align: "center",
							colspan: 2
						}, {
							header: "E",
							align: "center",
							colspan: 1
						}]
					]
				});

其中,rows属性是一个二维数组,每一个子项代表一行,可以指定每行包含的单元格及其所跨的列数,也可以根据自己的实际需要创建多行。


3、创建Grid实例,并使用ColumnHeaderGroup插件

				var sm = new Ext.grid.CheckboxSelectionModel();
				var viewport = new Ext.Viewport({
					layout: "fit",
					items: [{
						xtype: "grid",
						cls: "col-grid",
						title: "多表头Grid",
						store: new Ext.data.ArrayStore({
							fields: ["a", "b1", "b2", "c1", "c2", "c3", "d1", "d2", "e"],
							data: [
								["a", "b-1", "b-2", "c-1", "c-2", "c-3", "d-1", "d-2", "e"],
								["a", "b-1", "b-2", "c-1", "c-2", "c-3", "d-1", "d-2", "e"],
								["a", "b-1", "b-2", "c-1", "c-2", "c-3", "d-1", "d-2", "e"]
							]
						}),
						sm: sm,
						columns: [sm, {
							header: "&nbsp;",
							dataIndex: "a",
							align: "center"
						}, {
							header: "B1",
							dataIndex: "b1",
							align: "center"
						}, {
							header: "B2",
							dataIndex: "b2",
							align: "center"
						}, {
							header: "C1",
							dataIndex: "c1",
							align: "center"
						}, {
							header: "C2",
							dataIndex: "c2",
							align: "center"
						}, {
							header: "C3",
							dataIndex: "c3",
							align: "center"
						}, {
							header: "D1",
							dataIndex: "d1",
							align: "center"
						}, {
							header: "D2",
							dataIndex: "d2",
							align: "center"
						}, {
							header: "&nbsp;",
							dataIndex: "e",
							align: "center"
						}],
						viewConfig: {
							forceFit: true
						},
						plugins: row
					}]
				});


4、如果Gird是CheckboxSelectionModel模式,那在每一行的表头都会有一个checkbox选择框,而且多表头之间参差不齐。此时可以添加额外的css样式,对跨列的表头进行美化。

td.ux-grid-hd-group-cell .x-grid3-hd-checker {display:none;}

.col-grid td {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
col-grid为当前Grid设置的cls值

5、最终效果如下:


*注:以上实例使用ExtJS3.4版本实现。

评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值