Extjs 报表同值合并方法

做出如下图效果的报表：

核心函数：用的时候添加进去就行

//地市名称相同的列合并
function gridSpan(grid, rowOrCol,colName, borderStyle) {
    var array1 = 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();
    }
    count1 = 2; // 对第二列合并
    for (i = 1; i < count1; i++) {
        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;
            } 
            if (allRecs[index1].get(colName) == preValue) {
                allRecs[index1].set(colName, "&nbsp;");
                array1[i].push(j);
                //alert(i + "\r\n"+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, "&nbsp;");
                if (j == count2 - 1) {
                    allRecs[index1].set(colName, preValue);
                }
            }
        }
    }
    grid.getStore().commitChanges();//添加所有分隔线
    for (i = 0; i < grid.getStore().getCount(); i++) {
        for (j = 0; j < grid.getColumnModel().getColumnCount(); j++) {
            aRow = grid.getView().getCell(i, j);
            aRow.style.borderTop = borderStyle;
            aRow.style.borderLeft = borderStyle;
        }
    }//去除合并的单元格的分隔线
    for (i = 1; i < array1.length; 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";
            }
        }
    }
}

store在load的时候：

    errorInfoStore.on('load', function() {

                var mygrid = Ext.getCmp('mygrid');

                gridSpan(mygrid, 'row',"areaCode",  '1px solid #9BCEDB');
            });        
            

gridSpan方法的第三个参数 areaCode表示的是列标题。

在jsp页面加入如下css:

/*与表头对齐*/
.x-grid3-row td,.x-grid3-summary-row td {
    padding-right: 0px;
    padding-left: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
}  

/*去掉行间空白*/
.x-grid3-row {
    border-right-width: 0px;
    border-left-width: 0px;
    border-top-width: 0px;
    border-bottom-width: 0px;
}