Extjs gridpanel 合并单元格

  1 /*
  2          * *合并单元格的函数，合并表格内所有连续的具有相同值的单元格。调用方法示例：
  3          * *store.on("load",function(){gridSpan(grid,"row","[FbillNumber],[FbillDate],[FAudit],[FAuditDate],[FSure],[FSureDate]","FbillNumber");});
  4          * *参数：grid-需要合并的表格,rowOrCol-合并行还是列,cols-需要合并的列（行合并的时候有效）,sepCols以哪个列为分割(即此字段不合并的2行，其他字段也不许合并)，默认为空
  5          */  
  6         function gridSpan(grid, rowOrCol, cols, sepCol){  
  7             // alert('grid===='+grid+';rowOrCol='+rowOrCol+';cols='+cols);
  8             var array1 = new Array();  
  9             var arraySep = new Array();  
 10             var count1 = 0;  
 11             var count2 = 0;  
 12             var index1 = 0;  
 13             var index2 = 0;  
 14             var aRow = undefined;  
 15             var preValue = undefined;  
 16             var firstSameCell = 0;  
 17             var allRecs = grid.getStore().getRange();  
 18             if(rowOrCol == "row"){  
 19                 count1 = grid.getColumnModel().getColumnCount();  //列数
 20                 count2 = grid.getStore().getCount();  //行数(纪录数)
 21             } else {  
 22                 count1 = grid.getStore().getCount();  
 23                 count2 = grid.getColumnModel().getColumnCount();  
 24             }  
 25             for(i = 0; i < count1; i++){  
 26                 if(rowOrCol == "row"){  
 27                     var curColName = grid.getColumnModel().getDataIndex(i); //列名 
 28                     var curCol = "[" + curColName + "]";  
 29                     if(cols.indexOf(curCol) < 0)  
 30                     continue;  
 31                 }
 32                 
 33                 
 34                 preValue = undefined;  
 35                 firstSameCell = 0;  
 36                 array1[i] = new Array();  
 37                 for(j = 0; j < count2; j++){
 38                     
 39                     if(rowOrCol == "row"){  
 40                         index1 = j;  
 41                         index2 = i;  
 42                     } else {  
 43                         index1 = i;  
 44                         index2 = j;  
 45                     }  
 46                     var colName = grid.getColumnModel().getDataIndex(index2);  
 47                     if(sepCol && colName == sepCol)  
 48                     arraySep[index1] = allRecs[index1].get(sepCol);  
 49                     var seqOldValue = seqCurValue = "1";  
 50                     if(sepCol && index1 > 0){  
 51                         seqOldValue = arraySep[index1 - 1];  
 52                         seqCurValue = arraySep[index1];  
 53                     }  
 54                        
 55                     if(allRecs[index1].get(colName) == preValue && (colName == sepCol || seqOldValue == seqCurValue)){  
 56  //alert(colName + "======" + seqOldValue + "======" + seqCurValue);
 57                          allRecs[index1].set(colName, "");  
 58                          array1[i].push(j);  
 59                          if(j == count2 - 1){  
 60                              var index = firstSameCell + Math.round((j + 1 - firstSameCell) / 2 - 1);  
 61                              if(rowOrCol == "row"){  
 62                                  allRecs[index].set(colName, preValue);  
 63                                } else {  
 64                                    allRecs[index1].set(grid.getColumnModel().getColumnId(index), preValue);  
 65                                }  
 66                            }  
 67                        } else {  
 68                            if(j != 0){  
 69                                var index = firstSameCell + Math.round((j + 1 - firstSameCell) / 2 - 1);  
 70                                if(rowOrCol == "row"){  
 71                                    allRecs[index].set(colName, preValue);  
 72                                } else {  
 73                                    allRecs[index1].set(grid.getColumnModel().getColumnId(index), preValue);  
 74                             }  
 75                            }  
 76                        firstSameCell = j;  
 77                        preValue = allRecs[index1].get(colName);  
 78                        allRecs[index1].set(colName, "");  
 79                        if(j == count2 - 1){  
 80                            allRecs[index1].set(colName, preValue);  
 81                        }  
 82                    }
 83                      
 84                 }  
 85             }  
 86             grid.getStore().commitChanges();  
 87             
 88             // 添加所有分隔线
 89             var rCount = grid.getStore().getCount();  
 90             for(i = 0; i < rCount; i ++){
 91                 hRow = grid.getView().getRows()[i];
 92                 hRow.style.border = "none";
 93                 //hRow.style.borderBottom= "none";
 94                 for(j = 0; j < grid.getColumnModel().getColumnCount(); j ++){  
 95                        aRow = grid.getView().getCell(i,j); 
 96                        aRow.style.margin="0";
 97                        aRow.style.padding="0";
 98                         
 99                      if(i == 0){  
100                          aRow.style.borderTop = "none";  
101                          aRow.style.borderLeft = "1px solid #8db2e3"; 
102                          
103                      }else if(i == rCount - 1){  
104                          aRow.style.borderTop = "1px solid #8db2e3";  
105                          aRow.style.borderLeft = "1px solid #8db2e3";  
106                         aRow.style.borderBottom = "1px solid #8db2e3"; 
107                      }else{  
108                          aRow.style.borderTop = "1px solid #8db2e3";  
109                          aRow.style.borderLeft = "1px solid #8db2e3"; 
110                      }  
111                      if(j == grid.getColumnModel().getColumnCount()-1)  
112                          aRow.style.borderRight = "1px solid #8db2e3";  
113                     if(i == rCount-1)       
114                      aRow.style.borderBottom = "1px solid #8db2e3";  
115                    }  
116                }  
117                // 去除合并的单元格的分隔线
118                for(i = 0; i < array1.length; i++){  
119                    if(!Ext.isEmpty(array1[i])){  
120                        for(j = 0; j < array1[i].length; j++){  
121                            if(rowOrCol == "row"){  
122                                aRow = grid.getView().getCell(array1[i][j],i);  
123                                aRow.style.borderTop = "none";
124                                
125                            } else {  
126                                aRow = grid.getView().getCell(i, array1[i][j]);  
127                                aRow.style.borderLeft = "none";  
128                            }  
129                        }  
130                    }  
131                } 
132                
133                for(i = 0; i < count1; i++){  
134                     if(rowOrCol == "row"){  
135                         var curColName = grid.getColumnModel().getDataIndex(i); //列名 
136                         var curCol = "[" + curColName + "]";  
137                         if(cols.indexOf(curCol) < 0)  
138                         continue;  
139                     }
140                      
141                     for(j = 0; j < count2; j++){
142                         var hbcell = grid.getView().getCell(j,i);
143                         hbcell.style.background="#FFF"; //改变合并列所有单元格背景为白色
144                     }
145                }
146 
147         };

使用方法示例:

 1 this.gridPanel = new HT.GridPanel({
 2             region : 'center',
 3             tbar : this.topbar,
 4             border:true,
 5 // hideBorders:true,
 6             columnLines:false,
 7 // bodyBorder :false,
 8             // 使用RowActions
 9             rowActions : true,
10             id : 'PageGrid',
11             url : __ctxPath + "/qywz/listPage.do",
12             fields : [ {
13                 name : 'id',
14                 type : 'int'
15             }, 'name', 'contant', 'edituserid', 'editdate', 'createdate',
16                     'isenabled', 'navigationMenuId' ],
17             columns : [ {
18                 header : 'id',
19                 dataIndex : 'id',
20                 hidden : true
21             }, {
22                 header : '页面名称',
23                 dataIndex : 'name'
24             }, {
25                 header : '内容',
26                 dataIndex : 'contant'
27             }, {
28                 header : '编辑人',
29                 dataIndex : 'edituserid'
30             }, {
31                 header : '编辑日期',
32                 dataIndex : 'editdate'
33             }, {
34                 header : '生成日期',
35                 dataIndex : 'createdate'
36             }, {
37                 header : '有效标志',
38                 dataIndex : 'isenabled'
39             }, {
40                 header : '对应导航菜单表ID',
41                 dataIndex : 'navigationMenuId'
42             }, new Ext.ux.grid.RowActions({
43                 header : '管理',
44                 width : 100,
45                 actions : [ {
46                     iconCls : 'btn-del',
47                     qtip : '删除',
48                     style : 'margin:0 3px 0 3px'
49                 }, {
50                     iconCls : 'btn-edit',
51                     qtip : '编辑',
52                     style : 'margin:0 3px 0 3px'
53                 } ],
54                 listeners : {
55                     scope : this,
56                     'action' : this.onRowAction
57                 }
58             }) ]
59         // end of columns
60         });
61         var gridp = this.gridPanel;
62         
63         this.gridPanel.addListener('rowdblclick', this.rowClick);
64         
65         // ==>监听load , 执行合并单元格
66         this.gridPanel.getStore().on('load', function () { 
67             gridSpan(gridp,"row","[name],[contant]"); 
68              
69         });