extjs 同值合并

浏览数：40 / 时间：2015年06月09日

做出如下图效果的报表：

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

//地市名称相同的列合并 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;
}