extjs3合并表头 rowspan

最新推荐文章于 2023-04-24 22:51:51 发布

萬里無雲

最新推荐文章于 2023-04-24 22:51:51 发布

阅读量4.8k

点赞数

分类专栏：研发技术

本文链接：https://blog.csdn.net/liyun919/article/details/52022558

版权

本文介绍如何在ExtJS3中实现表格表头的行合并，由于ColumnHeaderGroup控件无法满足需求，作者选择直接修改extjs的源码。通过在grid中添加rows属性，设置每个单元格的colspan和rowspan属性，实现了自定义的行合并效果。详细过程包括对extjs-all-debug.js中renderHeaders方法的改写。

摘要由CSDN通过智能技术生成

extjs3的表头合并，虽然有ColumnHeaderGroup控件，但是这个控件无法实现合并行rowspan，显示太丑，为此只能自己去改extjs的源码，先上效果

grid中增加属性rows，rows的内容为

{header: ‘列名’,align: 'center',2: colspan,rowspan:1}组成的数组

 var cm = new Ext.grid.ColumnModel([
	{
		header : 'xx',
		sortable : false,
		dataIndex : 'V1'
	},{
		header : 'xx',
		sortable : false,
		dataIndex : 'V2'
	},{
		header : 'xx',
		sortable : false,
		dataIndex : 'V3'
	},{
		header : 'qq',
		sortable : false,
		hidden:true,
		dataIndex : 'V4'
	} ]);
	cm.rows=[[{header: '测试1',align: 'center',colspan: 2,rowspan:1},{header: '测试2',align: 'center',colspan: 2,rowspan:1}],
						      [{header: '测试3',align: 'center',colspan: 1,rowspan:2},{header: '测试4',align: 'center',colspan: 1,rowspan:1},
						       {header: '测试5',align: 'center',colspan: 1,rowspan:1},{header: '测试6',align: 'center',colspan: 1,rowspan:1}]];
	
		  var grid=new Ext.grid.GridPanel({
					   renderTo : 'content', 
						autoScroll : true ,
						loadMask : {
							msg :