使用Extjs 组合表头必须引用extjs自带的表头分组包 在这里我提供了两个表头分组包,ColumnHeaderGroup.js和GroupHeaderPlugin.js。ColumnHeaderGroup.js是Extjs3.1中自带的,提供表头组合,但无法进行筛选;GroupHeaderPlugin.js是改进过的,可进行筛选。
接下来就是实际代码
var group1 = [{}, { header : '分组1-1a', colspan : 4, align : 'center' }, {}, { header : '分组1-3', colspan : 5, align : 'center' }]; // 如果使用的是ColumnHeaderGroup.js 这地方需要改一下 // var group = new Ext.ux.grid.ColumnHeaderGroup({ // rows : [group1] // }); var group = new Ext.ux.plugins.GroupHeaderGrid({ rows : [group1] }); // 定义自动当前页行号 var rownum = new Ext.grid.RowNumberer({ header : 'NO', width : 28 }); // 定义列模型 var cm = new Ext.grid.ColumnModel([rownum, { header : '项目ID', // 列标题 dataIndex : 'xmid', // 数据索引:和Store模型对应 sortable : true // 是否可排序 }, { header : '项目名称', dataIndex : 'xmmc', sortable : true, width : 200 }, { header : '项目热键', dataIndex : 'xmrj' }, { header : '规格', dataIndex : 'gg' }, { dataIndex : 'dw', align:'center', fixed:true, width : 60 }, { header : '启用状态', dataIndex : 'qybz', // 演示render的用法(代码转换,该render由<G4Studio:ext.codeRender/>标签生成) renderer : QYBZRender, width : 60 }, { header : '剂型', dataIndex : 'jx', width : 60 }, { header : '产地', dataIndex : 'cd', width : 200 }, { header : '医院编码', dataIndex : 'yybm' }, { header : '更改时间', dataIndex : 'ggsj' }]); /** * 数据存储 */ var store = new Ext.data.Store({ // 获取数据的方式 proxy : new Ext.data.HttpProxy({ url : 'gridDemo.do?reqCode=querySfxmDatas' }), // 数据读取器 reader : new Ext.data.JsonReader({ totalProperty : 'TOTALCOUNT', // 记录总数 root : 'ROOT' // Json中的列表数据根节点 }, [{ name : 'xmid' // Json中的属性Key值 }, { name : 'sfdlbm' }, { name : 'xmmc' }, { name : 'xmrj' }, { name : 'gg' }, { name : 'dw' }, { name : 'qybz' }, { name : 'jx' }, { name : 'cd' }, { name : 'yybm' }, { name : 'ggsj' }]) }); // 表格实例 var grid = new Ext.grid.GridPanel({ // 表格面板标题,默认为粗体,我不喜欢粗体,这里设置样式将其格式为正常字体 title : '<span class="commoncss">表头分组</span>', height : 500, frame : true, autoScroll : true, region : 'center', // 和VIEWPORT布局模型对应,充当center区域布局 margins : '3 3 3 3', store : store, // 数据存储 stripeRows : true, // 斑马线 cm : cm, // 列模型 plugins : group, viewConfig : { // 不产横向生滚动条, 各列自动扩展自动压缩, 适用于列数比较少的情况 // forceFit : true }, loadMask : { msg : '正在加载表格数据,请稍等...' } });
运行效果