Ext单元格合并

Ext虽可以去除相同的单元格,但右侧数据左移导致grid错乱,有待解决。。。

 /** 
 * Kunoy 
 * 合并单元格 
 * @param {} grid  要合并单元格的grid对象 
 * @param {} cols  要合并哪几列 [1,2,4] 
 */
var mergeCells = function(grid,cols) {
 var gridid = '#' + grid.getId() + '-body';
 var arrayTr = $('tr', $(gridid));
 var trCount = arrayTr.length;
 var arrayTd;
 var td;
 var merge = function(rowspanObj, removeObjs) { //定义合并函数  
  if (rowspanObj.rowspan != 1) {
     debugger;
      var colName = grid.columns[rowspanObj.td - 1].dataIndex;// colName.dataIndex
   arrayTd = arrayTr[rowspanObj.tr].getElementsByTagName("td"); //合并行  
   td = arrayTd[rowspanObj.td - 1];
   td.rowSpan = rowspanObj.rowspan;
   td.vAlign = "middle";
   Ext.each(removeObjs, function(obj) { //隐身被合并的单元格
    debugger;
    arrayTd = arrayTr[obj.tr].getElementsByTagName("td");
    arrayTd[obj.td-1].style.display='none';
    //arrayTd[obj.td-1].style.borderTop = "none"; 
    arrayTd[obj.td-1].style.backgroundColor = '#6633FF';
                arrayTd[obj.td - 1].innerText = '';
                $(arrayTd[obj.td - 1]).css("border-top",'1px solid red'); 
   });
  }
 };
 var rowspanObj = {}; //要进行跨列操作的td对象{tr:1,td:2,rowspan:5}      
 var removeObjs = []; //要进行删除的td对象[{tr:2,td:2},{tr:3,td:2}]  
 var col;
 Ext.each(cols, function(colIndex) { //逐列去操作tr 
  var rowspan = 0;
  var divHtml = null; //单元格内的数值      
  //debugger;
  for ( var i = 0; i < trCount; i++) { //i=0表示表头等没用的行  
   arrayTd = arrayTr[i].getElementsByTagName("td");
   var cold = 0;
   col = colIndex + cold; //跳过RowNumber列和check列  
   if (!divHtml) {
    divHtml = arrayTd[col - 1].innerHTML;
    rowspanObj = {
     tr : i,
     td : col,
     rowspan : rowspan
    }
   } else {
    var cellText = arrayTd[col - 1].innerHTML;
    var addf = function() {
     //debugger;
     rowspanObj["rowspan"] = rowspanObj["rowspan"] + 1;
     removeObjs.push({
      tr : i,
      td : col
     });
     if (i == trCount - 1)
      merge(rowspanObj, removeObjs); //执行合并函数  
    };
       var mergef = function () {
                    merge(rowspanObj, removeObjs); //执行合并函数  
                    divHtml = cellText;
                    rowspanObj = { tr: i, td: col, rowspan: rowspan }
                    removeObjs = [];
                };
                if (cellText == divHtml) {
                  if(colIndex!=cols[0]){   
                             mergef();                             
                     }else  
                         addf();           
                }else{
                 mergef();
                }
   }
  }
 });
};

 grid加载数据完成后自动调用合并方法

duplicateQueryStore.on('load',function(){  
  //==>防止Grid重绘, 人工延迟
  setTimeout(function(){ 
  mergeCells(Ext.getCmp('duplicateGridId'),[6,7,8,9]); 
  },150);
});

   注:可在Chorme浏览器上按F12键，通过debugger进行调试。

转载于:https://my.oschina.net/yunsy/blog/618443