You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
317 lines
12 KiB
JavaScript
317 lines
12 KiB
JavaScript
3 years ago
|
/** 第一种 方法
|
||
|
|
* 合并单元格
|
||
|
|
* @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的<tbody>改到上层<table>的lastChild . <tbody>是各个<tr>的集合
|
||
|
|
var arrayTr = document.getElementById(grid.getId() + "-body").firstChild.firstChild.lastChild.getElementsByTagName('tr');
|
||
|
|
|
||
|
|
var trCount = arrayTr.length; //<tr>总行数
|
||
|
|
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;
|
||
|
|
//==>逐列靠表内具体数值去合并各个<tr> (表内数值一样则合并)
|
||
|
|
|
||
|
|
// try {
|
||
|
|
|
||
|
|
|
||
|
|
Ext.each(cols, function (colIndex) {
|
||
|
|
var rowspan = 1;
|
||
|
|
var divHtml = null; //单元格内的数值
|
||
|
|
for (var i = 0; i < trCount; i++)//==>从第一行数据0开始
|
||
|
|
{
|
||
|
|
//==>一个arrayTr[i]是一整行的所有数据, 一个arrayTd是 <td xxxx ><div>具体数值</div></td> ,
|
||
|
|
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多了一层<div>
|
||
|
|
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)
|
||
|
|
// }
|
||
|
|
};
|
||
|
|
*/
|
||
|
|
|