【叨、校长】Extjs 双表头Grid

最新推荐文章于 2022-04-13 22:26:46 发布

wbdaodao

最新推荐文章于 2022-04-13 22:26:46 发布

阅读量286

点赞数

分类专栏： Extjs开发文章标签： Extjs ColumnHeaderGroup 双表头 grid

Extjs开发专栏收录该内容

18 篇文章

订阅专栏

本文介绍如何使用ExtJS框架结合ColumnHeaderGroup.js插件实现具有双表头的Grid组件，并提供详细的代码示例及配置说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本教程改自官方实例！通俗易懂、老少皆宜！---叨、校长

直接上代码！代码注释的很详细了！大家使用的时候注意引入官方的插件ColumnHeaderGroup.js

代码示例：

Ext.onReady(function(){
	fields = [], //Grid数据字段
    columns = [],//Grid列模型
    data = [],//Grid数据
	FisrtHeaderGroupRow=[],//双行表头--第一行表头
	SecondHeaderGroupRow=[],//双行表头--第二行表头
	//。。。更多的表头
	
	//动态数据
	var firstRow=["First","Second","Third"],
	var secondRow=["AAA","BBB"]
	//。。。更多的表头数据
	
	//初始化Grid配置
	function initGirdonfig(){
		var array;
		//第一行表头的列数
		var num_first=firstRow.length;
		//第二行表头的列数
		var num_second=firstRow.length;
		//循环给表头，字段，列模型初始化数据
		for(var i=0;i<num_first;i++){
			FisrtHeaderGroupRow.push({
				header: firstRow[i],
                align: 'center',
                colspan: num_second
			})
			for(var j=0;j<num_second;j++){
				fields.push({//初始化Grid字段
					 type: 'int',
	                 name: firstRow[i]+ secondRow[j]
				})
				columns.push({//初始化Grid ColumnModel
					header:secondRow[j],
					dataIndex:firstRow[i]+ secondRow[j],
					renderer: Ext.util.Format.usMoney //数据格式成$
				})
			}
		}
		
		//获取Grid数据
		for(var k=0;k<num_first*num_second;k++){
			array=[];//一个array是一行记录
			array.push((Math.floor(Math.random()*11) + 1) * 100000); //随机产生数据
			data.push(array);
		}
	}
	
	//执行配置
	initGirdonfig();
	
	//初始化双表头插件 需要引用ColumnHeaderGroup.js,官方实例中有！
	var group = new Ext.ux.grid.ColumnHeaderGroup({
        rows: [FisrtHeaderGroupRow]
    });
	
	
	//声明一个Grid
	var grid = new Ext.grid.GridPanel({
        renderTo: 'mydiv',
        title: '双表头测试',
        width: 1000,
        height: 400,
        store: new Ext.data.ArrayStore({
            fields: fields,
            data: data
        }),
        columns: columns,
        viewConfig: {
            forceFit: true
        },
        plugins: group
    });
	
})