ExtJS 2.2.1 实现双表头动态列

发布时间：2023-09-06 02:33责任编辑：熊小新关键词：暂无标签

默认所有列(假设列3最大3列，动态显示)，使用headerRowsEx中的rowspan实现双表头，第一层表头的width也必须要设置正确。

使用"grid.getColumnModel().setHidden"即可实现列的隐藏，也不需要动态设置colspan。

{ ???xtype : ‘filtergrid‘, ???id : ‘grid1‘, ???cm : new Ext.grid.ColumnModel({ ???????columns : [{ ???????????header: ‘列1‘, ???????????id: ‘col1‘, ???????????dataIndex: ‘col1‘, ???????????width : 100 ???????}, { ???????????header: ‘列2‘, ???????????id: ‘col2‘, ???????????dataIndex: ‘col2‘, ???????????width : 100 ???????}, { ???????????header: ‘列3-1‘, ???????????id: ‘col31‘, ???????????dataIndex: ‘col31‘, ???????????width : 100 ???????}, { ???????????header: ‘列3-2‘, ???????????id: ‘col32‘, ???????????dataIndex: ‘col22‘, ???????????width : 100 ???????}, { ???????????header: ‘列3-3‘, ???????????id: ‘col33‘, ???????????dataIndex: ‘col33‘, ???????????width : 100 ???????}], ???????headerRowsEx : [[{ ???????????dataIndex : ‘col1‘, ???????????rowspan : 2 ???????}, { ???????????dataIndex : ‘col2‘, ???????????rowspan : 2 ????????}, { ???????????id : ‘col3Header‘, ???????????header : ‘列3‘， ???????????colspan : 3, ???????????width : 300 ???????}], [{ ???????????header : ‘列1‘ ???????}, { ???????????header : ‘列2‘ ???????}, { ???????????dataIndex : ‘col31‘, ???????????columnIdRef : [‘col3Header‘] ???????}, { ???????????dataIndex : ‘col32‘, ???????????columnIdRef : [‘col3Header‘] ???????}, { ???????????dataIndex : ‘col33‘, ???????????columnIdRef : [‘col3Header‘] ???????}]] ???}), ???filters : new Ext.ux.GridFilters({ ???????filters : [{ ???????????...... ???????}, { ???????????...... ???????}] ???}), ???store : ..., ???listeners : ...},initialize : function(param) { ???var grid = Ext.getCmp(‘grid1‘); ???var cm = grid.getColumnModel(); ???cm.setHidden(cm.findColumnIndex(‘col33‘), true); ???// ?查找列的Index ???//cm.findColumnIndex(‘col33‘); ???// 单元格背景色设置 ???// grid.getView().getCell(i, j).style.backgroundColor = "gray";}

原文地址：http://blog.51cto.com/13685327/2352191

ExtJS 2.2.1 实现双表头动态列

知识推荐