/** 第一种 方法 * 合并单元格 * @param {} grid 要合并单元格的grid对象 * @param {} rows 那合并那几列 [1,2,4] * var mergeCells = function (grid, rows) { //得到grid的El对象 var sdk0 = Ext.get(grid.getId() + "-body"); var sdk1 = Ext.get(grid.getId() + "-body").first(); var sdk2 = Ext.get(grid.getId() + "-body").first().first(); var gridEl = Ext.get(grid.getId() + "-body").first().first().first(); //得到所有可以有机会进行合并单元格行(tr)的集合 var arrayTr = gridEl.select("tr"); arrayTr.each(function (el) {//取出表头等没用的列 if (el.getAttribute("class") == "x-grid-header-row") { arrayTr.removeElement(el) } }) //定义一个辅助的内部函数 var merge = function (rowspanObj, removeObjs) { var trIndex = 1; arrayTr.each(function (tr) { var arrayTd = tr.select("td"); arrayTd.each(function (td) { if (td.getAttribute("class").indexOf("x-grid-cell-special") != -1) { arrayTd.removeElement(td) } }); //跨列 if (trIndex == rowspanObj["tr"]) { var tdIndex = 1; arrayTd.each(function (td) { if (tdIndex == rowspanObj["td"]) { if (rowspanObj["rowspan"] != 1) { td.set({ "rowspan": rowspanObj["rowspan"], "valign": "middle" }); } } tdIndex++; }); } //删除 Ext.each(removeObjs, function (obj) { var tdIndex = 1; if (trIndex == obj["tr"]) { arrayTd.each(function (td) { if (tdIndex == obj["td"]) { td.set({ "style": "display:none" }) } tdIndex++; }) } }) trIndex++; }) console.log(rowspanObj); console.log(removeObjs); } //要进行跨列操作的td对象{tr:1,td:2,rowspan:5} var rowspanObj = {}; //要进行删除的td对象[{tr:2,td:2},{tr:3,td:2}] var removeObjs = []; //逐列去操作tr Ext.each(rows, function (rowIndex) { console.log("--------------------------------------"); var trIndex = 1; var rowspan = 1; var divHtml = null; //单元格内的数值 var trCount = arrayTr.getCount(); arrayTr.each(function (tr) { //准备td集合 var arrayTd = tr.select("td"); arrayTd.each(function (td) { //移除序号,多选框等不进行合并的td if (td.getAttribute("class").indexOf("x-grid-cell-special") != -1) { arrayTd.removeElement(td) } }) //准备格式化每一列 var tdIndex = 1; arrayTd.each(function (td) { if (tdIndex == rowIndex) { if (!divHtml) { divHtml = td.first().getHTML(); rowspanObj = { tr: trIndex, td: tdIndex, rowspan: rowspan } } else { var cellText = td.first().getHTML(); if (cellText == divHtml) { rowspanObj["rowspan"] = rowspanObj["rowspan"] + 1; removeObjs.push({ tr: trIndex, td: tdIndex }); if (trIndex == trCount) { merge(rowspanObj, removeObjs); //执行合并函数 } } else { merge(rowspanObj, removeObjs); //执行合并函数 divHtml = cellText; rowspanObj = { tr: trIndex, td: tdIndex, rowspan: rowspan } removeObjs = []; } } } tdIndex++; }) trIndex++; }) }) } */ /** 第二种 方法 * Kunoy * 合并单元格 * @param {} grid 要合并单元格的grid对象 * @param {} cols 要合并哪几列 [1,2,4] */ var mergeCells = function (grid, cols) { var arrayTr = document.getElementById(grid.getId() + "-body").firstChild.firstChild.firstChild.getElementsByTagName('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 != cols[0]) { //取得上一个合并的列号 //var iCol = col; //if (colIndex != lastCol) { // iCol = lastCol; //} var iCol = lastCol + 1; //取得第一个合并的列号 var leftDisplay = arrayTd[iCol - 2].style.display; //判断左边单元格值是否已display if (leftDisplay == 'none') addf(); else mergef(); } else { addf(); lastCol = col; //取得第一个合并的列号; } } else { mergef(); } } } //lastCol = col; //取得上一个合并的列号 }); }; //*/ /** 第三种 方法 * ruantao1989 * 合并单元格 * @param {} grid 要合并单元格的grid对象 * @param {} cols 要合并哪几列 例如 [1,2,4] * var mergeCells = function (grid, cols) { //==>ExtJs4.2的改到上层的lastChild . 是各个的集合 var arrayTr = document.getElementById(grid.getId() + "-body").firstChild.firstChild.lastChild.getElementsByTagName('tr'); var trCount = arrayTr.length; //总行数 var arrayTd; var td; //==>显示层将目标格的样式改为.display='none'; var merge = function (rowspanObj, removeObjs)//定义合并函数 { if (0 != rowspanObj.rowspan) { arrayTd = arrayTr[rowspanObj.tr].getElementsByTagName("td"); //合并行 td = arrayTd[rowspanObj.td - 1]; td.rowSpan = rowspanObj.rowspan; td.vAlign = "middle"; // td.style.font-size = '20px'; // $(td).hide(); $(td).css("font-size", "15px"); $(td).attr("title", $(td).text()); $(td).find('span').attr("title", $(td).text()); $(td).css('color', 'rgb(148, 201, 36)'); var height = $(td).innerHeight(); if (removeObjs.length > 0) { $(td).css("padding-top", height / 3); // var showIndex = Math.ceil(removeObjs.length/2); } //隐身被合并的单元格 Ext.each(removeObjs, function (obj) { arrayTd = arrayTr[obj.tr].getElementsByTagName("td"); arrayTd[obj.td - 1].style.display = 'none'; arrayTd[obj.td - 1].style.borderTop = "none"; }); } }; //==>显示层将目标格的样式改为.display='none'; var rowspanObj = {}; //要进行跨列操作的td对象{tr:1,td:2,rowspan:5} var removeObjs = []; //要进行删除的td对象[{tr:2,td:2},{tr:3,td:2}] var col; //==>逐列靠表内具体数值去合并各个 (表内数值一样则合并) // try { Ext.each(cols, function (colIndex) { var rowspan = 1; var divHtml = null; //单元格内的数值 for (var i = 0; i < trCount; i++)//==>从第一行数据0开始 { //==>一个arrayTr[i]是一整行的所有数据, 一个arrayTd是 , 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; divHtml = $(divHtml).text(); //==>拿到真正数值,相比Ext4.1多了一层
rowspanObj = { tr: i, td: col, rowspan: rowspan } } else { var cellText = arrayTd[col - 1].innerHTML; cellText = $(cellText).text(); //==>拿到真正数值 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 != cols[0]) { var leftDisplay = arrayTd[col - 2].style.display; //判断左边单元格值是否已display if (leftDisplay == 'none') { addf(); } else { mergef(); } } else { addf(); } } else { mergef(); } } } }); // } catch (e) { // console.log(e.message) // } }; */
具体数值