ext合并单元格的方法

//合并表头的方法extjs的官网上有，这里提供的是合并数据单元格的方法

 

//首先在页面上添加以下内容

<style> 
 /*与表头对齐*/
  .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;
 }
</style>

 

//然后在表格加载数据时调用下面的函数

//合并单元格的函数，合并表格内所有连续的具有相同值的单元格。调用方法示例：grid.on('load',function(){gridSpan(grid,'row','1px solid #8080FF');}); //参数：grid-需要合并的表格,rowOrCol-合并行还是列,borderStyle-合并后单元格分隔线样式 function gridSpan(grid, rowOrCol, 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(); } for(i = 0; 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; } var colName = grid.getColumnModel().getColumnId(index2); if(allRecs[index1].get(colName) == preValue){ allRecs[index1].set(colName, ' '); array1[i].push(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 = 0; 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'; } } } }

注意：表格太大时可能导致页面暂时失去响应，稍等即可