Ext多重表头的使用

最新推荐文章于 2019-01-09 13:45:42 发布

jianle888

最新推荐文章于 2019-01-09 13:45:42 发布

阅读量600

点赞数

分类专栏： ext

本文链接：https://blog.csdn.net/jianle888/article/details/35237113

版权

ext 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.文件引入

在页面引入ColumnHeaderGroup.js与ColumnHeaderGroup.css文件，可以在examples/ux/目录下找到它们

2.定义列头

var row = [  
	{ header: '', colspan: 2, align: 'center' },//header表示父表头标题，colspan表示包含子列数目   
	{ header: '', colspan: 2, align: 'center' }, 
	{ header: '端口占用率', colspan: 6, align: 'center' },  
	{ header: '', colspan: 1, align: 'center' }
 ];

// 此处rows配置多个row数组则可以出现多层表头
var group = new Ext.ux.grid.ColumnHeaderGroup({  
    rows: [row]  
}); 

var cm = new Ext.grid.ColumnModel({
	// specify any defaults for each column
	defaults : {
		sortable : false
	// columns are not sortable by default
	},
	stateId : "setCompareValueGridId",
	columns : [
			new Ext.grid.RowNumberer({
				width : 26
			}),
			{
				id : 'ID',
				header : 'ID',
				dataIndex : 'PM_COMPARE_ID',
				width : 100,
				hidden : true,
				hideable : false
			},
			{
				id : 'NE_DISPLAY_NAME',
				header : '网元',
				dataIndex : 'NE_DISPLAY_NAME',
				width : 120
			},
			{
				id : 'SLOT_RATE',
				header : '槽道占用率',
				dataIndex : 'SLOT_RATE',
				width : 120
			},
			{
				id : '2M',
				header : '2M',
				dataIndex : '2M',
				width : 60
			},
			{
				id : 'STM-1',
				header : 'STM-1',
				dataIndex : 'STM-1',
				width : 60
			},
			{
				id : 'STM-4',
				header : 'STM-4',
				dataIndex : 'STM-4',
				width : 60
			},
			{
				id : 'STM-16',
				header : 'STM-16',
				dataIndex : 'STM-16',
				width : 60
			},
			{
				id : 'STM-64',
				header : 'STM-64',
				dataIndex : 'STM-64',
				width : 60
			},
			{
				id : 'STM-256',
				header : 'STM-256',
				dataIndex : 'STM-256',
				width : 60
			},
			{
				id : 'MULTISEC_RATE',
				header : '复用段平均占用率（所在环）',
				dataIndex : 'MULTISEC_RATE',
				width : 200
			} ]
});

3.在grid中配置

var gridPanel = new Ext.grid.EditorGridPanel({
	id : 'grid',
	region : 'center',
	store : store,
	cm : cm,
	selModel : checkboxSelectionModel, // 必须加不然不能选checkbox
	frame : false,
	stripeRows : true, // 交替行效果
	clicksToEdit : 2,// 设置点击几次才可编辑
	stateId : "setCompareValueGridId",
	stateful : true,
	tbar : [ '-', {
		text : '查询',
		icon : '../../resource/images/btnImages/search.png',
		privilege : viewAuth,
		handler : search
	}, "-", {
		text : '导出',
		icon : '../../resource/images/btnImages/export.png',
		privilege : modAuth,
		handler : saveCompareValue
	} ],
	bbar : pageTool,
	plugins: group // 要加上这一句
});