[Ext JS]5.1.1 分组标题的表格(Grouped Header Grid)与使用技巧

分组标题的表格,也就是表格的标题行不仅仅是一行,可能是两行或者是多行,而且上下行之间有层级关系。
以两层的分组标题栏为例, 显示的效果如下:

在这里插入图片描述

实现方式

分组的标题栏的定义很简单, 就是在columns 下嵌套定义columns ,dataIndex在最后一级标题定义。完整的定义如下代码所示:

           Ext.create('Ext.grid.Panel',{
				renderTo:'div1',
				store: mystore,
				columns:[
				{
					text:'',
					dataIndex:'power'
				},
				{
					text:'魏国',
					columns: [{
						text:'许昌',
						dataIndex:'xc'
					},{
						text:'洛阳',
						dataIndex:'ly'
					}]
				},{
					text:'蜀国',
					columns: [{
						text:'成都',
						dataIndex:'cd'
					},{
						text:'汉中',
						dataIndex:'hz'
					}]
				},{
					text:'吴国',
					columns: [{
						text:'长沙',
						dataIndex:'cs'
					},{

猜你喜欢

转载自blog.csdn.net/oscar999/article/details/124159812
今日推荐