码迷,mamicode.com
首页 > Web开发 > 详细

extjs 同值合并

时间:2014-08-25 15:14:04      阅读:284      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   os   io   for   ar   2014   

做出如下图效果的报表:

bubuko.com,布布扣

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

bubuko.com,布布扣
//地市名称相同的列合并 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";
            }
        }
    }
}
bubuko.com,布布扣


store在load的时候:

bubuko.com,布布扣
errorInfoStore.on(load, function() { var mygrid = Ext.getCmp(mygrid); gridSpan(mygrid, row,"areaCode", 1px solid #9BCEDB);
            }); 
bubuko.com,布布扣

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

在jsp页面加入如下css:

bubuko.com,布布扣
/*与表头对齐*/ .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;
}

extjs 同值合并

标签:style   blog   http   color   os   io   for   ar   2014   

原文地址:http://my.oschina.net/u/1398304/blog/306359

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!