ExtJs合并单元格

前端框架ExtJS4.0

下图为合并后效果：

先

最近项目中做Grid显示时，需要将单元格分类然后按一定要求给合并，如果单单是合并表头，这个实现很简单，但是现在要求的合并单元格，这就需要直接去操作HTML表格标签了，进行rowspan,colspan之类;下面是具体代码：

注：grid为要合并的表单,row为合并的开始行，col为合并的开始列,type['row','col']要合并列或者行,num合并的行数或者列数

function span(grid, row, col, type, num) {
    switch (type) {
        case 'row':
            tds = Ext.get(grid.view.getNode(row)).query('td');
            Ext.get(tds[col]).set({rowspan: num});
            Ext.get(Ext.get(tds[col])).setStyle({'vertical-align': 'middle'});
            for (i = row + 1; i < row + num; i++) {
                Ext.get(Ext.get(grid.view.getNode(i)).query('td')[col]).destroy();
            }
            break;
        case 'col':
           tds = Ext.get(grid.view.getNode(row)).query('td');
            Ext.get(tds[col]).set({colspan: num});
            Ext.get(Ext.get(tds[col])).setStyle({'vertical-align': 'middle'});
            for (i = row + 1; i < row + num; i++) {
                Ext.get(tds[col+1]).destroy();
            }
            break;
    }
}

监听load:根据自己的业务逻辑来设计代码

load: function(){

//遍历store
            var models = compareFinceStore.data;
            var length = models.length;
            for (var index = 0; index < length; index++) {//行
                var rows = 0;
                var record = models.get(index); 
                var obj = record.get('saleOrderNumber');

                for (var index2 = index; index2 < models.length; index2++) {l//匹配每一行相同列

                    var record2 = models.get(index2);
                    if (obj == record2.get('saleOrderNumber')) {
                        rows++;
                    } else {
                        continue;
                    }
                }

//合并15,14,13,10,3,2列 注意:这里如果你是顺序合并的话或出现合并后剩余数据挤到下一列的问题，需要倒序进行合并解决问题
               var cols = [15,14,13,10,3,2];
                if (rows > 1) {
                  for(var i=0;i<cols.length;i++){
                      span(compareFinceReport_grid, index, cols[i], 'row', rows);
                  }
                    index += rows - 1;//直接跳转到合并后的下一行
                }
            }

}