Extjs 合并单元格

//合并表头的方法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>

 

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

view plaincopy to clipboardprint?
//合并单元格的函数，合并表格内所有连续的具有相同值的单元格。调用方法示例：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';    
            }           
        }    
    }    
}  
//合并单元格的函数，合并表格内所有连续的具有相同值的单元格。调用方法示例：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';  
            }         
        }  
    }  
}