ExtJS3 - 如何实现多表头Grid

jopen 4年前

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版本实现。


来自: http://blog.csdn.net/hwhsong/article/details/50373109