做出如下图效果的报表：
核心函数：用的时候添加进去就行
//地市名称相同的列合并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, " "); 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, " "); 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"; } } }} 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;}