ExtJs - grid 合并单元格 跨行跨列

extjs4 grid合并列和合并行 使用之前先理解下table是如何合并行和列的 有些基本的html知识就很容易理解下面的代码了(extjs4.2) /** * grid合并列 * @调用示例 grid.store.on('load',function(){mergeCells(grid,[0,1,2])}); * @param {} grid * @param {} cols 阅读详情
/**
* 合并单元格
* @param {} grid  要合并单元格的grid对象
* @param {} cols  要合并哪几列 [1,2,4]
*/
function mergeCells(grid, cols) {
	var arrayTr = document.getElementById(grid.getId()+"-body").firstChild.firstChild.firstChild.getElementsByTagName('tr');
	//var arrayTr = document.getElementById(grid.getId()+"-body").firstChild.nextSibling;
	//var arrayTr = Ext.get(grid.getId()+"-body").first().first().first().select("tr");
	var trCount = arrayTr.length;
	var arrayTd;
	var td;
	var merge = function(rowspanObj, removeObjs) { //定义合并函数
		if(rowspanObj.rowspan != 1) {
			arrayTd = arrayTr[rowspanObj.tr].getElementsByTagName("td"); //合并行
			td = arrayTd[rowspanObj.td - 1];
			td.rowSpan = rowspanObj.rowspan;
			td.vAlign = "middle";        
			Ext.each(removeObjs, function(obj) { //隐身被合并的单元格
				arrayTd = arrayTr[obj.tr].getElementsByTagName("td");
				arrayTd[obj.td - 1].style.display = 'none';
			});
		}  
	};
	var rowspanObj = {}; //要进行跨列操作的td对象{tr:1,td:2,rowspan:5}
	var removeObjs = []; //要进行删除的td对象[{tr:2,td:2},{tr:3,td:2}]
	var col;

	Ext.each(cols, function(colIndex) { //逐列去操作tr
		var rowspan = 1;
		var divHtml = null;		//单元格内的数值
		for(var i=1; i<trCount; i++) {  //i=0表示表头等没用的行
			arrayTd = arrayTr[i].getElementsByTagName("td");
			var cold = 0;
			Ext.each(arrayTd, function(Td) {	//获取RowNumber列和check列
			if(Td.getAttribute("class").indexOf("x-grid-cell-special") != -1)
				cold++;                
			});
			col = colIndex + cold;	//跳过RowNumber列和check列
			if(!divHtml) {
				divHtml = arrayTd[col-1].innerHTML;
				rowspanObj = {tr: i, td: col, rowspan: rowspan}
			}else{
				var cellText = arrayTd[col-1].innerHTML;
				var addf = function() { 
				  rowspanObj["rowspan"] = rowspanObj["rowspan"] + 1;
				  removeObjs.push({tr: i,td: col});
				  if(i == trCount-1) merge(rowspanObj, removeObjs);//执行合并函数
				};
				var mergef = function() {
				  merge(rowspanObj, removeObjs);//执行合并函数
				  divHtml = cellText;
				  rowspanObj = {tr: i, td: col, rowspan: rowspan}
				  removeObjs = [];
				};
				if(cellText == divHtml) {
					if(colIndex != 1) { 
					var leftDisplay=arrayTd[col-2].style.display;//判断左边单元格值是否已display
					if(leftDisplay == 'none') addf();  
					else mergef();              
				} else addf();                      
			} else mergef();      
		  }
		}
	});
};

EXTJS4 给grid加 复选框列 记录一下被extjs折磨的过程。。。。效果如图:就这玩意,慢活了大半天,网上搜的答非所问,可能是我关键词选的不好。最后还是在官方的例子中找到的。官方例子地址:http://docs.sencha.com/extjs/4.0.7/extjs-build/examples/grid/grid-plugins.html这其实很简单,代码如下:(红色的为复选框的代码,其他的可自行忽略),var sm = ... 阅读详情

相关推荐

Ext grid合并单元格

1.js代码 MyGridView=Ext.extend(Ext.grid.GridView,{ renderHeaders : function(){ var cm = this.cm, ts = this.templates; var ct = ts.hcell,ct2=ts.mhcell; var cb = [], sb = [], p = {},mcb=[]; for(var i = 0, len = cm.getColumnCount(); i < len; i++){ p.id = cm.getColumnId(i); p.value = cm.getColumnHeader(i) || ""; p true);

Extjs grid 合并行

在实际开发中可能会遇到grid中要合并单元格的操作,可能是合并横向单元格,也可能是合并列的单元格,网络上有很多demo,大多是用css样式去控制,但是这样的话代码就会显得很多,不容易阅读,我们看到html 类似  的代码表示 table 该列向下合并两行。那么extjs grid 基本结构也是table ,我们可尝试采用这样的方式来控制。小白也在网上找了一些方法,并加以修改整合,写出以下demo

任彦章的博客 3257

ExtJS 4.2 Grid组件单元格合并的方法

ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能。 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid组件,然后查看下的HTML源码。 1.1.1 Grid组件 1.1.2 HTML代码 从这些代码中可以看出,Grid组件可分为grid-header和grid-body 两块区域(若含有工具栏和分页栏,它们都会含有各自的独立区域)。 其中grid-body包含了许多tr元素,每一个tr都是代表Grid组件中的一行数据;每个tr内部都包含了许多td,每个td表示一个单元格。 1.1.3 结构图

extjs中将相同的行值合并

/* * *合并单元格的函数,合并表格内所有连续的具有相同值的单元格。调用方法示例: * this.on("loadData",this.onLoadData,this); * onLoadData : function(store){ this.gridSp...

m0_37558768的博客 795

软件工程期末知识点总结【超详细】

生命周期模型(过程模型):瀑布模型、快速原型模型、增量模型、螺旋模型、喷泉模型。2、实体联系图:1、数据对象2、属性3、联系(1:1、1:N、M:N)3、语句覆盖 就是设计足够的调试用例,使得程序中的每个语句至少执行一次。 5、判定覆盖就是设计足够的测试用例,使得程序中每个判定的取“真”分支和取“假”分支至少都执行一次,判定覆盖又称分支覆盖 6、条件覆盖就是设计足够的测试用例,使得程序判定中的每个条件能获得各种可能的结果。7、软件开发时期通常分成4个阶段:总体设计、详细设计、编码和单元测试、综合测试。

这个人好有趣....hh 1万+

告别配置烦恼!保姆级教程:在Windows 10/11上为QT5.14.2配置MSVC2017编译器(附VS2022组件避坑指南)

本文提供了一份详细的保姆级教程,指导如何在Windows 10/11上为QT5.14.2配置MSVC2017编译器,包括VS2022组件避坑指南。从环境准备到关键配置,再到调试工具验证和Qt Creator中的编译器设置,一步步解决常见问题,帮助开发者快速搭建稳定可靠的开发环境。

weixin_30615767的博客 502

ExtJs - grid 合并单元格 跨行跨列

在Grid加载完成后直接调用此方法,需要注意的是,合并的单元格值必须一样。 1 /** 2 * 合并单元格 3 * @param {} grid 要合并单元格的grid对象 4 * @param {} cols 要合并哪几列 [1,2,4] 5 */ 6 7 function mergeCells(grid, cols) { 8 var

gaoqiao1988的专栏 1853

ROS学习【11】-----基于ubuntu16.04上Gazebo机器人环境搭建的传感器仿真(camera、kinect、Lidar),并通过Rviz进行数据显示

ROS学习-----基于ubuntu16.04上Gazebo机器人环境搭建的传感器仿真目录一、Gazebo环境搭建前的准备1、将搭建模型下载到我们的gazebo环境下2、升级我们的gazebo版本二、创建配置launch文件参数的world文件1、进入工程包mbot_gazebo2、创建文件夹worlds3、进入该文件夹4、创建playground.world文件5、创建room.world文件三...

qq_42451251的博客 3608

ExtJs4 - grid 合并单元格 跨行跨列

ExtJs - grid 合并单元格 跨行跨列 在Grid加载完成后直接调用此方法,需要注意的是,合并的单元格值必须一样。 /** * 合并单元格 * @param {} grid 要合并单元格的grid对象 * @param {} cols 要合并哪几列 [1,2,4] */ function mergeC

为梦想放生,创造梦一样的未来! 2395

从零开始:如何用Python手绘波特图并分析电路稳定性

本文详细介绍了如何使用Python绘制波特图并分析电路稳定性,涵盖从基础理论到实际应用的完整流程。通过NumPy和Matplotlib实现频域分析,包括RC低通滤波器和RLC带通滤波器的案例,以及相位裕度计算等高级技巧,为电子工程师提供了一套高效的电路分析解决方案。

hhh00的博客 371

雷电模拟器安装面具环境并过软件检测系列(看这一篇就够了!)

雷电模拟器安装面具环境并过基本软件的环境检测

qq_45059975的博客 6万+

ExtJs grid合并单元格

ExtJs grid合并单元格

hddfuuh的博客 978

RV1126B芯片实战:如何用这款视觉处理器SoC打造你的第一个AI摄像头项目

本文详细介绍了如何利用瑞芯微RV1126B视觉处理器SoC从零构建AI摄像头项目。涵盖硬件选型、开发环境搭建、ISP配置、AI模型部署及系统集成等关键步骤,帮助开发者高效实现边缘计算方案,特别适合智能安防和工业检测应用。

dropout6artist的博客 931

extjs6中grid合并单元格

mergeGrid: function (me) { var grid = this, colIndexArray = [0, 1, 4], isAllSome; me.store.on('load', function () { isAllSome = isAllSome == und...

qq_20426717的博客 1386

Microsoft Dynamics 365软件二次开发:Dynamics365部署与版本控制策略

在Microsoft Dynamics 365中,自定义实体允许开发者扩展系统以满足特定业务需求。自定义实体可以包含字段、选项集、关系和其他属性,与标准实体类似,但完全由用户定义。1. 登录到Dynamics 365环境。2. 转到“解决方案”区域,选择“自定义”。3. 在“自定义”菜单中,选择“实体”。4. 点击“新建”,输入实体名称,例如“客户反馈”。5. 添加字段,如“反馈类型”、“反馈日期”、“描述”等。6. 设置主键和唯一标识符。7. 定义关系,如与“客户”实体的关联。

kkchenjj的博客 2208

2025国赛数学建模A题 完整Python代码 烟幕干扰弹的投放策略

常量定义G = 9.8 # 重力加速度 m/s²V_SMOKE_SINK = 3 # 烟幕下沉速度 m/sMISSILE_SPEED = 300 # 导弹速度 m/sEFFECTIVE_RADIUS = 10 # 有效遮蔽半径 mEFFECTIVE_DURATION = 20 # 有效遮蔽时间 sTARGET_POS = np.array([0, 200, 0]) # 目标位置FALSE_TARGET_POS = np.array([0, 0, 0]) # 假目标位置# 初始位置。

YOLO 1106

extjs4.2 grid 合并单元格并居中显示

//==>June8 /**   * ruantao1989  * 合并单元格   * @param {} grid  要合并单元格的grid对象   * @param {} cols  要合并哪几列 例如 [1,2,4]   */   var mergeCells = function( grid , cols ) {   //==>ExtJs4.2的改到上层的lastChil

awe5566的专栏 6638

文档:亲测可用解决vnc灰屏,黑屏,鼠标大黑叉情况

主要解决vnc-viewer灰屏,黑屏,鼠标大黑叉等现象,详细见文档。

Extjs Grid合并单元格

客户需求需要将grid  中的数据进行合并单元格处理!公司程序用的是extjs3.X 的代码底层生成的html 代码不是标准的table 代码,所以合并单元格只能另辟蹊径!以下是在网上找的extjs3 和 extjs4 的合并单元方法! /**   * 解决ExtJs4.1合并单元格问题  * @param {} grid  要合并单元格的grid对象   * @param {}

T_zm_cross的专栏 2677

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

采用新的方法解决extjs4.1 grid合并单元格问题

首先技术原理基于狂人论坛的大大yunfengcheng发的帖子《100行代码解决ExtJs4.1合并单元格问题》,表示感谢。 如果需要他的代码各位可自行下载,在此不方便贴出(人家可卖30个金钱的呢,虽然有点小贵,呵呵)。 好了,进入正题吧。首先使用他的代码后效果如下: 从这幅图可以看 /** * Kunoy * 合并单元格 * @param {}

为梦想放生,创造梦一样的未来! 1009

华为的C语言编程规范.pdf

华为技术有限公司内部技术规范。本规范制定了编写C语言程序的基本原则、规则和建议。从代码的清晰、简洁、可测试、安全、程序效率、可移植各个方面对C语言编程作出了具体指导。

Extjs grid 合并单元格

/* 这个方法四个参数分别是 row:合并起始行 col:合并起始列.这两个参数是为了定位,要从哪个单元格开始合并. type:是要合并行或者列. num:是要合并的数量 //==>监听load , 执行合并单元格 grid.getStore().on('load', function () { span(grid, 0, 0, 'row', 5); }); */ var span = func

zyzlywq的专栏 7833
上一篇: Java虚拟机学习 - 对象引用强度
下一篇: Java虚拟机学习 - 内存调优
胸口碎大石_
博客等级 码龄17年 1154粉丝 82原创
评论 56
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值