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

/**
* 合并单元格
* @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();      
		  }
		}
	});
};

  • 6
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 56
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 56
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值