Extjs 3.4 同值合并
摘自:http://www.cnblogs.com/kunpengit/archive/2012/11/13/2768239.html
/** * grid gridPanel 需要合并的表格 * rowOrCol 合并行还是列 需要合并的列(dateIndex) *borderStyle 样式 **/ 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"; } } } }; //在执行load的时候加载 ds_Custom.on('load',function(){ gridSpan(gpCustom, 'row',"cname", '1px solid #DDDDDD'); });
/*与表头对齐*/
.x-grid3-row td,.x-grid3-summary-row td {
padding-right: 0px;
padding-left: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
注:如果合并的行不想显示网格的话,请在网页的css里面加上 下面的样式参数
/*去掉行间空白*/
.x-grid3-row {
border-right-width: 1px;
border-left-width: 1px;
border-top-width: 1px;
border-bottom-width: 1px;
}