grid+table列合并（体现一对多关系）

结果如下图:

table列合并,前4列合并。JS代码如下：

/**
*tbl:table对应的dom元素
*beginRow:从第几行开始合并（从0开始）
*endRow:合并到哪一行，负数表示从底下数几行不合并 (为0时，则到table最后一行)
*colIdxes:合并的列下标的数组，如[0,1]表示合并前两列，[0]表示只合并第一列
* by whb 20180427
**/

function _mergeSameCell(tbl,beginRow,endRow,colIdxes){
    debugger;
    var colIdx = colIdxes[0];
    var newColIdxes = colIdxes.concat();
    newColIdxes.splice(0,1);
    var delRows = new Array();
    //var rs = tbl.rows;
   var rs =  tbl.find("tbody tr");
    //endRow为0的时候合并到最后一行，小于0时表示最后有-endRow行不合并  
    if(endRow === 0){
        endRow = rs.length - 1;
    }else if(endRow < 0){
        endRow = rs.length - 1 + endRow;
    }
    var rowSpan = 1; //要设置的rowSpan的值  
    var rowIdx = beginRow; //要设置rowSpan的cell行下标  
    var cellValue; //存储单元格里面的内容  
    for(var i=beginRow; i<= endRow + 1; i++){  
        if(i === endRow + 1){//过了最后一行的时候合并前面的单元格 
            if(newColIdxes.length > 0){  
                _mergeSameCell(tbl,rowIdx,endRow,newColIdxes);  
            }  
            rs[rowIdx].cells[colIdx].rowSpan = rowSpan;  
        }else{  
            var cell = rs[i].cells[colIdx];  
            if(i === beginRow){//第一行的时候初始化各个参数  
                cellValue = cell.innerHTML;
                rowSpan = 1;
                rowIdx = i;
            }else if(cellValue != cell.innerHTML){//数据改变合并前面的单元格  
                cellValue = cell.innerHTML;
                if(newColIdxes.length > 0){
                    me.mergeSameCell(tbl,rowIdx,i - 1,newColIdxes);
                }
                rs[rowIdx].cells[colIdx].rowSpan = rowSpan;
                rowSpan = 1;
                rowIdx = i;
            }else if(cellValue === cell.innerHTML){//数据和前面的数据重复的时候删除单元格
                rowSpan++;
                delRows.push(i);
            }
        }
    }
    for(var j=0;j<delRows.length; j++){
        //rs[delRows[j]].deleteCell(colIdx); //删除
        debugger;
        rs[delRows[j]].cells[colIdx].style.display = 'none';//隐藏字段,不删除
    }
}

 

使用如下：

_mergeSameCell($("#grid").find("table").first(),0,0,[1,2,3,4]);

 上面的代码会出现以下情况：

解决方法：

用第一列确定其他列是否合并，不再用每一列确定每一列的合并情况：

/**
*tbl:table对应的dom元素
*beginRow:从第几行开始合并（从0开始）
*endRow:合并到哪一行，负数表示从底下数几行不合并 
*colIdxes:合并的列下标的数组，如[0,1]表示合并前两列，[0]表示只合并第一列
* by whb 20180427
**/

me.mergeSameCell = function (tbl,beginRow,endRow,colIdxes){
    debugger;
    var colIdx = colIdxes[0];
    var newColIdxes = colIdxes.concat();
    newColIdxes.splice(0,1);
    var delRows = new Array();
    //var rs = tbl.rows;
    var rs =  tbl.find("tbody tr");
    //endRow为0的时候合并到最后一行，小于0时表示最后有-endRow行不合并  
    if(endRow === 0){
        endRow = rs.length - 1;
    }else if(endRow < 0){
        endRow = rs.length - 1 + endRow;
    }
    var rowSpan = 1; //要设置的rowSpan的值  
    var rowIdx = beginRow; //要设置rowSpan的cell行下标  
    var cellValue; //存储单元格里面的内容  
    var cellValue2; //存储单元格里面的内容  
    for(var i=beginRow; i<= endRow + 1; i++){  
        if(i === endRow + 1){//过了最后一行的时候合并前面的单元格 
            if(newColIdxes.length > 0){  
                me.mergeSameCell(tbl,rowIdx,endRow,newColIdxes);  
            }  
            rs[rowIdx].cells[colIdx].rowSpan = rowSpan;  
        }else{  
            debugger;
            var cell = rs[i].cells[colIdx];  

            if(i == beginRow){//第一行的时候初始化各个参数  
                cellValue = cell.innerHTML;
                rowSpan = 1;
                rowIdx = i;
            }else if(cellValue != cell.innerHTML){//数据改变合并前面的单元格  
                cellValue = cell.innerHTML;
                //                 if(newColIdxes.length > 0){//每一列确定各自是否合并
                //                     me.mergeSameCell(tbl,rowIdx,i - 1,newColIdxes);
                //                 }
                rs[rowIdx].cells[colIdx].rowSpan = rowSpan;
                for(var k=1;k<colIdxes.length;k++){//仅用第一列确定其他列是否合并，第一列合并则其他列也合并。
                    rs[rowIdx].cells[colIdxes[k]].rowSpan = rowSpan;
                }

                rowSpan = 1;
                rowIdx = i;
            }else if(cellValue == cell.innerHTML){//数据和前面的数据重复的时候删除单元格
                rowSpan++;
                delRows.push(i);
            }
        }
    }
    for(var j=0;j<delRows.length; j++){
        //rs[delRows[j]].deleteCell(colIdx); //删除
        debugger;
        rs[delRows[j]].cells[colIdx].style.display = 'none';//隐藏字段,不删除
        for(var k=1;k<colIdxes.length;k++){
            rs[delRows[j]].cells[colIdxes[k]].style.display = 'none';//隐藏字段,不删除
        }
    }
}