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

在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 };