ExtJS3 - 如何实现多表头Grid
jopen
8年前
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、最终效果如下：
