extjs6中grid合并单元格

最新推荐文章于 2025-06-06 08:43:31 发布

萍的微博go

最新推荐文章于 2025-06-06 08:43:31 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： extjs

本文链接：https://blog.youkuaiyun.com/qq_20426717/article/details/88945907

extjs 专栏收录该内容

55 篇文章

订阅专栏

本文介绍了一个在ExtJS6中实现Grid合并单元格的函数`mergeGrid`。该函数监听store的加载事件，通过遍历Grid的行和指定列，比较相邻行的相同单元格内容来决定是否进行合并。合并时会设置边框样式，并更新单元格内容。当所有指定列的内容都相同时，才会进行合并操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

mergeGrid: function (me) {
var grid = this,
colIndexArray = [0, 1, 4],
isAllSome;
me.store.on('load', function () {
isAllSome = isAllSome == undefined ? true : isAllSome; // 默认为true
// 1.是否含有数据
var gridView = document.getElementById(grid.getView().getId() + '-body');
if (gridView == null) {
return;
}
// 2.获取Grid的所有tr
var trArray = [];
var tableArray = gridView.getElementsByTagName('table');
if (tableArray != null)
Ext.each(tableArray, function (table) {
table.setAttribute("style", "border:0;background-color: white");
});
trArray = gridView.getElementsByTagName('tr');
var tdArray = gridView.getElementsByTagName('td');
var count = 1;
if (tdArray != null) {
Ext.each(tdArray, function (td) {
td.style.borderBottom = "1px solid #e9e9e9";
});
}
// 3.进行合并操作
if (isAllSome) { // 3.1 全部列合并：只有相邻tr所指定的td都相同才会进行合并
var lastTr = trArray[0]; // 指向第一行
// 1)遍历grid的tr，从第二个数据行开始
for (var i = 1, trLength = trArray.length; i < trLength; i++) {
var thisTr = trArray[i];
var isPass = true; // 是否验证通过
var index = i % 2 != 0 ? i / 2 : i / 2 - 1;//显示的位置
// 2)遍历需要合并的列
for (var j = 0, colArrayLength = colIndexArray.length; j < colArrayLength; j++) {
var colIndex = colIndexArray[j];
// 3)比较2个td的列是否匹配，若不匹配，就把last指向当前列
if (lastTr.childNodes[colIndex].innerText != thisTr.childNodes[colIndex].innerText) {
for (var n = 0; n < colIndexArray.length; n++) {
colIndex = colIndexArray[n];
thisTr.childNodes[colIndex].style["borderTop"] = "1px solid #e9e9e9";
trArray[index].childNodes[colIndex].innerHTML = lastTr.childNodes[colIndex].innerHTML;
lastTr.childNodes[colIndex].innerHTML = "";
trArray[index].childNodes[colIndex].style["textAlign"] = 'center';
lastTr.childNodes[colIndex].style["borderBottom"] = "";
//if (colIndex == 0) {
// lastTr.childNodes[colIndex].style["width"] = "79px";
//}
/*else if (colIndex == 0) {//复选框修改 2019-03-20 wlp
lastTr.childNodes[colIndex].style["width"] = "28px";
trArray[index].childNodes[colIndex].style["width"] = "25px";
}*/
}
lastTr = thisTr;
isPass = false;
break;
}
}
// 4)若colIndexArray验证通过，就把当前行合并到'合并行'
if (isPass) {
for (var j = 0, colArrayLength = colIndexArray.length; j < colArrayLength; j++) {
var colIndex = colIndexArray[j];
thisTr.childNodes[colIndex].style["borderBottom"] = "";

thisTr.childNodes[colIndex].innerHTML = "";
//if (colIndex == 0) {
// thisTr.childNodes[colIndex].style["width"] = "79px";
//}
/*else if (colIndex == 0) {
thisTr.childNodes[colIndex].style["width"] = "28px";
}*/

}
}
}
}

});

}