Extjs gridpanel 合并单元格

 /*
          * *合并单元格的函数，合并表格内所有连续的具有相同值的单元格。调用方法示例：
          * *store.on("load",function(){gridSpan(grid,"row","[FbillNumber],[FbillDate],[FAudit],[FAuditDate],[FSure],[FSureDate]","FbillNumber");});
          * *参数：grid-需要合并的表格,rowOrCol-合并行还是列,cols-需要合并的列（行合并的时候有效）,sepCols以哪个列为分割(即此字段不合并的2行，其他字段也不许合并)，默认为空
          */
         function gridSpan(grid, rowOrCol, cols, sepCol){
             // alert('grid===='+grid+';rowOrCol='+rowOrCol+';cols='+cols);
             var array1 = new Array();
             var arraySep = new Array();
             var count1 = 0;
             var count2 = 0;
             var index1 = 0;
             var index2 = 0;
             var aRow = undefined;
             var preValue = undefined;
             var firstSameCell = 0;
             var allRecs = grid.getStore().getRange();
             if(rowOrCol == "row"){
                 count1 = grid.getColumnModel().getColumnCount();  //列数
                 count2 = grid.getStore().getCount();  //行数(纪录数)
             } else {
                 count1 = grid.getStore().getCount();
                 count2 = grid.getColumnModel().getColumnCount();
             }
             for(i = 0; i < count1; i++){
                 if(rowOrCol == "row"){
                     var curColName = grid.getColumnModel().getDataIndex(i); //列名
                     var curCol = "[" + curColName + "]";
                     if(cols.indexOf(curCol) < 0)
                     continue;
                 }

                 preValue = undefined;
                 firstSameCell = 0;
                 array1[i] = new Array();
                 for(j = 0; j < count2; j++){

                     if(rowOrCol == "row"){
                         index1 = j;
                         index2 = i;
                     } else {
                         index1 = i;
                         index2 = j;
                     }
                     var colName = grid.getColumnModel().getDataIndex(index2);
                     if(sepCol && colName == sepCol)
                     arraySep[index1] = allRecs[index1].get(sepCol);
                     var seqOldValue = seqCurValue = "1";
                     if(sepCol && index1 > 0){
                         seqOldValue = arraySep[index1 - 1];
                         seqCurValue = arraySep[index1];
                     }  

                     if(allRecs[index1].get(colName) == preValue && (colName == sepCol || seqOldValue == seqCurValue)){
  //alert(colName + "======" + seqOldValue + "======" + seqCurValue);
                          allRecs[index1].set(colName, "");
                          array1[i].push(j);
                          if(j == count2 - 1){
                              var index = firstSameCell + Math.round((j + 1 - firstSameCell) / 2 - 1);
                              if(rowOrCol == "row"){
                                  allRecs[index].set(colName, preValue);
                                } else {
                                    allRecs[index1].set(grid.getColumnModel().getColumnId(index), preValue);
                                }
                            }
                        } else {
                            if(j != 0){
                                var index = firstSameCell + Math.round((j + 1 - firstSameCell) / 2 - 1);
                                if(rowOrCol == "row"){
                                    allRecs[index].set(colName, preValue);
                                } else {
                                    allRecs[index1].set(grid.getColumnModel().getColumnId(index), preValue);
                             }
                            }
                        firstSameCell = j;
                        preValue = allRecs[index1].get(colName);
                        allRecs[index1].set(colName, "");
                        if(j == count2 - 1){
                            allRecs[index1].set(colName, preValue);
                        }
                    }

                 }
             }
             grid.getStore().commitChanges();  

             // 添加所有分隔线
             var rCount = grid.getStore().getCount();
             for(i = 0; i < rCount; i ++){
                 hRow = grid.getView().getRows()[i];
                 hRow.style.border = "none";
                 //hRow.style.borderBottom= "none";
                 for(j = 0; j < grid.getColumnModel().getColumnCount(); j ++){
                        aRow = grid.getView().getCell(i,j);
                        aRow.style.margin="0";
                        aRow.style.padding="0";

                      if(i == 0){
                          aRow.style.borderTop = "none";
                          aRow.style.borderLeft = "1px solid #8db2e3"; 

                      }else if(i == rCount - 1){
                          aRow.style.borderTop = "1px solid #8db2e3";
                          aRow.style.borderLeft = "1px solid #8db2e3";
                         aRow.style.borderBottom = "1px solid #8db2e3";
                      }else{
                          aRow.style.borderTop = "1px solid #8db2e3";
                          aRow.style.borderLeft = "1px solid #8db2e3";
                      }
                      if(j == grid.getColumnModel().getColumnCount()-1)
                          aRow.style.borderRight = "1px solid #8db2e3";
                     if(i == rCount-1)
                      aRow.style.borderBottom = "1px solid #8db2e3";
                    }
                }
                // 去除合并的单元格的分隔线
                for(i = 0; i < array1.length; i++){
                    if(!Ext.isEmpty(array1[i])){
                        for(j = 0; j < array1[i].length; j++){
                            if(rowOrCol == "row"){
                                aRow = grid.getView().getCell(array1[i][j],i);
                                aRow.style.borderTop = "none";

                            } else {
                                aRow = grid.getView().getCell(i, array1[i][j]);
                                aRow.style.borderLeft = "none";
                            }
                        }
                    }
                } 

                for(i = 0; i < count1; i++){
                     if(rowOrCol == "row"){
                         var curColName = grid.getColumnModel().getDataIndex(i); //列名
                         var curCol = "[" + curColName + "]";
                         if(cols.indexOf(curCol) < 0)
                         continue;
                     }

                     for(j = 0; j < count2; j++){
                         var hbcell = grid.getView().getCell(j,i);
                         hbcell.style.background="#FFF"; //改变合并列所有单元格背景为白色
                     }
                }

         }; 

使用方法示例:

 this.gridPanel = new HT.GridPanel({
             region : 'center',
             tbar : this.topbar,
             border:true,
 // hideBorders:true,
             columnLines:false,
 // bodyBorder :false,
             // 使用RowActions
             rowActions : true,
             id : 'PageGrid',
             url : __ctxPath + "/qywz/listPage.do",
             fields : [ {
                 name : 'id',
                 type : 'int'
             }, 'name', 'contant', 'edituserid', 'editdate', 'createdate',
                     'isenabled', 'navigationMenuId' ],
             columns : [ {
                 header : 'id',
                 dataIndex : 'id',
                 hidden : true
             }, {
                 header : '页面名称',
                 dataIndex : 'name'
             }, {
                 header : '内容',
                 dataIndex : 'contant'
             }, {
                 header : '编辑人',
                 dataIndex : 'edituserid'
             }, {
                 header : '编辑日期',
                 dataIndex : 'editdate'
             }, {
                 header : '生成日期',
                 dataIndex : 'createdate'
             }, {
                 header : '有效标志',
                 dataIndex : 'isenabled'
             }, {
                 header : '对应导航菜单表ID',
                 dataIndex : 'navigationMenuId'
             }, new Ext.ux.grid.RowActions({
                 header : '管理',
                 width : 100,
                 actions : [ {
                     iconCls : 'btn-del',
                     qtip : '删除',
                     style : 'margin:0 3px 0 3px'
                 }, {
                     iconCls : 'btn-edit',
                     qtip : '编辑',
                     style : 'margin:0 3px 0 3px'
                 } ],
                 listeners : {
                     scope : this,
                     'action' : this.onRowAction
                 }
             }) ]
         // end of columns
         });
         var gridp = this.gridPanel;

         this.gridPanel.addListener('rowdblclick', this.rowClick);

         // ==>监听load , 执行合并单元格
         this.gridPanel.getStore().on('load', function () {
             gridSpan(gridp,"row","[name],[contant]"); 

         });