`
wb1991wb
  • 浏览: 157089 次
  • 来自: 上海
社区版块
存档分类
最新评论

【叨、校长】Extjs 双表头Grid

阅读更多

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

直接上代码!代码注释的很详细了!大家使用的时候注意引入官方的插件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
    });
	
})
0
0
分享到:
评论

相关推荐

    extjs 双表头

    双表头在ExtJS中可以通过`Ext.grid.header.Container`和`Ext.grid.column.Column`组件的组合来实现。首先,创建一个`headerContainer`,然后在这个容器中添加两个或多个`column`,这些`column`可以设置不同的标题和...

    EXTjs grid双层表头的实现 (源代码和示例)

    要实现EXTjs grid的双层表头,我们需要使用EXTjs的`column`配置和`headerContainer`组件。具体步骤如下: 1. 创建grid面板: 首先,创建一个EXTjs的grid面板,设置其基本属性,如store(数据源)和columns(列配置...

    extjs 双层表头

    使用extjs生成双层表头,父表头包括子表头

    extjs grid 多表头插件

    多表头插件是ExtJS Grid的一个重要特性,它允许我们创建具有多层次、复杂结构的表头,以便更好地组织和呈现数据。在ExtJS Grid中,多表头能够帮助用户更清晰地理解列的分组和关系,提高数据的可读性和分析性。 首先...

    extjs双表头

    在ExtJS中,"双表头"是一种高级表格布局,它允许在一个表格中展示两层或更多层的列标题,以更清晰地组织和呈现复杂的数据。这种特性对于处理具有多层次分类或者需要合并列功能的表格非常有用。 在"extjs双表头"的...

    extjs动态表头,绝对的好东西啊

    这个"extjs动态表头"的资源很可能是一个插件或组件,名为`Ext.ux.grid.DynamicGridPanel.js`,它扩展了ExtJS的标准GridPanel,增加了动态调整列的能力。 动态表头的核心功能包括: 1. **实时编辑**:用户可以在...

    EXTJS2.2.1中Grid表头的下拉菜单很难看

    在EXTJS 2.2.1版本中,用户可能会发现Grid表头的下拉菜单在视觉呈现上不尽如人意,这可能是由于默认样式或自定义样式配置不当导致的。 EXTJS的Grid组件允许用户对列进行排序、分组、过滤等操作,而表头的下拉菜单...

    extjs3合并表头 rowspan

    在ExtJS 3中,如果你需要合并表头,你可能会使用`Ext.grid.GroupingView`或自定义的视图类。表头合并通常涉及到设置特定的配置选项和处理渲染过程。以下是一些关键知识点: 1. **GroupingView**: 这是ExtJS 3中用于...

    extjs 实现动态表头

    在IT领域,特别是Web开发中,ExtJS是一个广泛使用的JavaScript框架,它提供了丰富的用户界面组件,包括表格(Grid)等。动态表头是ExtJS中一个高级特性,它允许开发者根据需要在运行时动态地创建和修改表格的列结构...

    ExtJS grid过滤操作

    ExtJS Grid是一个强大的数据展示组件,它允许用户以表格的形式查看和操作大量数据。在实际应用中,数据过滤是常见的需求,以便用户能快速定位到感兴趣的信息。本篇将深入探讨ExtJS Grid的过滤操作,以及如何动态地对...

    extjs中设置grid默认行高及换行

    Extjs 中想改变grid 行高,如果只是简单的设置了height的值是可以实现grid 的行高,但是如果使用了插件:rowexpander ,最出现新的问题。 感兴趣的朋友可以试试的。 此文档可以解决你的烦恼,为了找到资源下载,...

    extjs4动态添加表头

    extjs4动态添加表头字段、删除、增加记录!

    Extjs动态Grid的生成 htm

    Extjs动态Grid的生成 htm

    extjs4打印grid插件

    Grid是ExtJS中的核心组件,它提供了一种灵活的方式来展示和操作数据集。在ExtJS4中,有时我们需要实现打印Grid的功能,以便用户能够将屏幕上的数据显示在纸质或PDF文档上。这就是"extjs4打印grid插件"的作用。 打印...

    ExtJs动态grid的生成

    我们首先从标题"ExtJs动态grid的生成"开始,了解动态生成Grid的基本概念和实现方法。 动态生成Grid意味着在运行时根据需求创建和更新Grid组件,而不是在应用初始化时静态定义。这种灵活性允许开发者更好地响应数据...

    extjs3多表头

    在ExtJS 3中,多表头(Multi-Header)功能允许用户创建复杂的、多层次的表格列布局,以更好地组织和展示数据。这种功能在数据展示和分析时非常有用,尤其是在处理大量信息时,可以提高用户体验和数据可读性。 多...

    Extjs4 grid使用例子

    在给定的"Extjs4 grid使用例子"中,我们可以深入理解如何在MVC架构下有效地利用ExtJS4的Grid组件。Grid组件是ExtJS中的核心部分,它提供了一个灵活的、可定制的数据展示网格,通常用于显示和操作大量数据。 1. **...

    Extjs4.2 Grid filter Demo 表格过滤实验

    这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹,其余文件过大并且与主题无关,因此未包含。具体方法,请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》

    EXTJS4 表格GRID示例

    EXTJS4 GRID 表格 分页 编辑 添加判断 颜色判断 分组 等示例

    Extjs动态GRID

    EXTJS动态GRID是一种基于JavaScript的前端开发框架EXTJS中的组件,用于展示数据并提供交互功能。EXTDRID(可能是EXTGRID的拼写错误)是指EXTJS中的Grid Panel,它允许开发者构建灵活、可配置的数据视图,适用于大量...

Global site tag (gtag.js) - Google Analytics