`

Ext 动态表头和行合并

 
阅读更多
1.产生动态的表头
function initHeader(data){
	var colWidth = 50;  
	var headers = data.header;
	var fields = data.fields;
	if(headers == null || headers.length == null || headers.length == 0){
		alert("请先给XXX!");
		return;
	}
	/*
	 * 构建field和data
	 */
	var dataMaps =[];
	dataMaps.push({name:'group_name',details:[]});
	for(var k=0;k<fields.length;k++){
		dataMaps.push(fields[k]);
	}
	dataMaps.push({name:'total_count',details:[]});
	var gridStore = new Ext.data.JsonStore({
		data: {root:data.datas},
		autoDestroy: true,
		root:'root',
		fields:dataMaps		
	});
	
	/**
	 * 构建复杂表头
	 */
	var columns = [{header: 'XX', locked:true, width: 90, dataIndex: 'group_name'},
				   {header: '合计', locked:true, width: 40, dataIndex: 'total_count'}];
	var columnsRow = [{header: 'XX',align:'center',rowspan:2,colspan:1,locked:true,height:46},
					  {header: '合计',align:'center',rowspan:2,colspan:1,locked:true,height:46}];
	for(var i=0; i<headers.length; i++){
		var dataInfo = headers[i];
		var dates = dataInfo.header_2;
		//第一行
		var hrcell = {};
		hrcell.header = dataInfo.header_1;//列名
		hrcell.colspan = dates.length;
		hrcell.align = 'center';
		hrcell.width = dates.length*colWidth;
		columnsRow.push(hrcell);
		for(var j=0; j<dates.length; j++){
			var dobj = dates[j];
			//第二行
			var drcell = {};
			drcell.header = dobj.count_name;
			drcell.width = colWidth;
			drcell.align = 'center';
			drcell.dataIndex = dobj.column_index;
			columns.push(drcell);
		}
	}
	var grid = new Ext.grid.GridPanel({
		allowEdit:false,
		columnLines: true,
		autoScroll:true,
		stripeRows: true,
		autoSizeColumns : false,
		view:  new Ext.ux.grid.LockingGridView(),
		store:gridStore,
		enableColLock:false,
		enableColumnResize:false,
		enableColumnMove: false,
		enableColumnHide:false,
		colModel: new Ext.ux.grid.LockingColumnModel(/*columns*/{
			columns:columns,
			defaultSortable: true,
			bLockedTable:true,
			rows: [columnsRow]
		}),
	    viewConfig: {
	        forceFit: false
	    },
	    sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
	    title: '',
	    plugins: [new Ext.ux.plugins.GroupHeaderGrid()]
	});
	return grid;
}
分享到:
评论

相关推荐

    Ext grid合并表头

    `Ext JS`是一个流行的JavaScript库,用于构建富客户端应用,其`grid`组件提供了灵活的数据网格展示,而合并表头则是增强用户界面和提升用户体验的关键特性。 合并表头允许我们在`grid`中创建多级表头,使得数据分类...

    extjs3合并表头 rowspan

    表头合并通常涉及到设置特定的配置选项和处理渲染过程。以下是一些关键知识点: 1. **GroupingView**: 这是ExtJS 3中用于创建分组网格的视图类。它可以显示行分组,但默认不支持列的合并。如果你想在分组网格中实现...

    EXT 复杂表头插件

    2. **合并单元格**:在表头中合并单元格,形成跨列或跨行的标题,使得复杂的数据结构更加清晰。 3. **可展开/折叠**:表头中的部分可以折叠或展开,以隐藏或显示更详细的层级信息,提高界面的可读性和交互性。 4. **...

    Ext 表头合并插件

    Ext 表头合并插件是一种...总的来说,Ext表头合并插件是提升Ext JS Grid功能的一个有力工具,它使得数据展示更加清晰,提升了用户体验。通过熟练掌握其用法和配置,开发者可以构建出更加专业且用户友好的数据展示界面。

    ext grid 合并行

    在EXT JS框架中,Grid组件是一种非常常用的展示数据表格的方式,它提供了丰富的功能和灵活性。...记住,实践是检验代码的最好方式,尝试根据上述步骤编写代码,逐步调试和完善,最终你会得到一个满意的行合并EXT Grid。

    Ext grid合并单元格

    根据提供的文件信息,我们可以深入探讨如何在 Ext JS 中实现 Grid 的单元格合并功能。此案例主要涉及到了自定义 GridView 的 `renderHeaders` 方法来达到单元格合并的目的,并且还涉及了模板(Template)的使用、...

    ext 4.1 多重表头gridheader

    在EXT 4.1中,可以使用GridHeader实现跨列的表头合并,以表示某些列的共同属性或类别。这通过配置`header跨越`属性(`header跨越`)实现,可以有效减少列的数量,提高数据的可读性。 5. **表头菜单** GridHeader...

    Ext合并单元格

    综上所述,"Ext 合并单元格"是一个增强用户界面的关键特性,通过合理的代码设计和配置,可以实现各种复杂的单元格合并效果,使数据展示更加高效且易于理解。结合提供的源代码和效果图,我们可以深入学习和实践这一...

    ext表格合并单元格的方法

    本文将详细介绍一种在Ext JS中实现数据单元格合并的方法,并通过示例代码来帮助开发者更好地理解和应用这一技术。 #### CSS样式调整 为了实现良好的视觉效果,在开始编写JavaScript代码之前,我们需要对CSS样式做...

    Extjs 实现多行合并(rowspan)效果

    此外,如果合并的行跨越了多列,还需要确保列的顺序和width不会导致合并后的单元格位置错乱。 4. **CSS样式调整**:为了使合并后的单元格看起来更加自然,可能需要对CSS做一些调整,例如隐藏被合并的单元格,或者...

    Extjs表格合并代码

    表格合并通常涉及到两个主要方面:行合并和列合并。在ExtJS中,这可以通过操作表格面板(`Ext.grid.Panel`)的配置和插件来实现。首先,我们需要了解表格的行和列模型,包括`columns`配置项和`store`数据源。 1. 行...

    ext3.3制作报表新功能,表格实现报表格式

    1. **表头分割**:EXT JS允许开发者将表头进行多级拆分,这样可以更好地组织复杂的数据结构,使用户能快速理解列的含义和层级关系。例如,一级标题可以表示部门,二级标题表示具体的职位,数据行则显示各个职位的...

    extjs合并单元格

    标题中的“extjs合并单元格”指的是在使用Ext JS这个JavaScript框架时,如何实现表格(Grid)中的单元格合并功能。Ext JS是一个用于构建富客户端Web应用的前端框架,提供了丰富的组件库,其中包括数据网格(Data ...

    extjs双表头

    这个JavaScript文件可能定义了新的类或者扩展了ExtJS的内置`Ext.grid.header.Container`类,以支持多级表头的逻辑和交互。它可能包含的方法有设置和获取表头层级、合并单元格、处理排序事件等。 `HeaderColumn.css`...

    ext ToExcel

    在实际应用中,"EXT ToExcel"功能还可以结合其他EXT特性,例如自定义样式、表头和合并单元格,以提供更丰富的导出体验。同时,考虑到浏览器的安全限制,这种方法可能需要用户手动触发文件下载,而不是自动执行,以...

    Element实现表格嵌套、多个表格共用一个表头的方法

    这是一个方法,可以根据业务逻辑返回一个对象,该对象的 `row` 和 `column` 分别表示当前行和列,`rows` 和 `cols` 用于指定需要合并的行数和列数。在这个案例中,由于 `area` 占据了多行,我们可以在此方法中进行...

    自由调整表格列宽和固定标题及首列

    例如,可以使用条件格式化突出显示特定值,利用排序和过滤功能快速查找和分析数据,或者使用合并单元格来创建美观的表头。 5. **效率提升技巧**:在处理大型表格时,批量调整列宽能节省大量时间。选中连续的列,...

    ul打造表格样式

    使用`::before`伪元素和`content`属性模拟合并单元格的效果。 在实际应用中,这种方法尤其适用于响应式设计,因为`&lt;ul&gt;`和`&lt;li&gt;`的灵活性使得我们可以更容易地调整单元格的大小和排列方式。同时,这种技术对于SEO也...

Global site tag (gtag.js) - Google Analytics