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

时间:2021-12-17 09:25:04

在Grid加载完成后直接调用此方法,需要注意的是,合并的单元格值必须一样。

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

ExtJs - grid 合并单元格 跨行跨列
 1 /** 
2 * 合并单元格
3 * @param {} grid 要合并单元格的grid对象
4 * @param {} cols 要合并哪几列 [1,2,4]
5 */
6
7 function mergeCells(grid, cols) {
8 var arrayTr = document.getElementById(grid.getId() + "-body").firstChild.firstChild.firstChild
9 .getElementsByTagName('tr');
10 //var arrayTr = document.getElementById(grid.getId()+"-body").firstChild.nextSibling;
11 //var arrayTr = Ext.get(grid.getId()+"-body").first().first().first().select("tr");
12 var trCount = arrayTr.length;
13 var arrayTd;
14 var td;
15 var merge = function(rowspanObj, removeObjs) { //定义合并函数
16 if (rowspanObj.rowspan != 1) {
17 arrayTd = arrayTr[rowspanObj.tr].getElementsByTagName("td"); //合并行
18 td = arrayTd[rowspanObj.td - 1];
19 td.rowSpan = rowspanObj.rowspan;
20 td.vAlign = "middle";
21 Ext.each(removeObjs, function(obj) { //隐身被合并的单元格
22 arrayTd = arrayTr[obj.tr].getElementsByTagName("td");
23 arrayTd[obj.td - 1].style.display = 'none';
24 });
25 }
26 };
27 var rowspanObj = {}; //要进行跨列操作的td对象{tr:1,td:2,rowspan:5}
28 var removeObjs = []; //要进行删除的td对象[{tr:2,td:2},{tr:3,td:2}]
29 var col;
30
31 Ext.each(cols, function(colIndex) { //逐列去操作tr
32 var rowspan = 1;
33 var divHtml = null; //单元格内的数值
34 for (var i = 1; i < trCount; i++) { //i=0表示表头等没用的行
35 arrayTd = arrayTr[i].getElementsByTagName("td");
36 var cold = 0;
37 Ext.each(arrayTd, function(Td) { //获取RowNumber列和check列
38 if (Td.getAttribute("class")
39 .indexOf("x-grid-cell-special") != -1)
40 cold++;
41 });
42 col = colIndex + cold; //跳过RowNumber列和check列
43 if (!divHtml) {
44 divHtml = arrayTd[col - 1].innerHTML;
45 rowspanObj = {
46 tr : i,
47 td : col,
48 rowspan : rowspan
49 }
50 } else {
51 var cellText = arrayTd[col - 1].innerHTML;
52 var addf = function() {
53 rowspanObj["rowspan"] = rowspanObj["rowspan"] + 1;
54 removeObjs.push({
55 tr : i,
56 td : col
57 });
58 if (i == trCount - 1)
59 merge(rowspanObj, removeObjs);//执行合并函数
60 };
61 var mergef = function() {
62 merge(rowspanObj, removeObjs);//执行合并函数
63 divHtml = cellText;
64 rowspanObj = {
65 tr : i,
66 td : col,
67 rowspan : rowspan
68 }
69 removeObjs = [];
70 };
71 if (cellText == divHtml) {
72 if (colIndex != 1) {
73 var leftDisplay = arrayTd[col - 2].style.display;//判断左边单元格值是否已display
74 if (leftDisplay == 'none'){
75 addf();
76 }else{
77 mergef();
78 }
79 } else{
80 addf();
81 }
82 } else{
83 mergef();
84 }
85 }
86 }
87 });
88 };