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();      
		  }
		}
	});
};

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章