您的位置：首页 > Web前端 > JavaScript

ExtJS3 - 如何实现多表头Grid

2015-12-21 17:04 651 查看
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: " ",
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: " ",
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版本实现。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航