Easyui merges cells according to multiple columns and then edits the cell to solve the misalignment problem of the row where the cell is located

There is no automatic merge attribute in Easyui, so you have to write your own method.
We are in the onLoadSuccess event of the easyui table

onLoadSuccess:function(data1){
    
    
    $this.tbmerf(table, ['id', 'cableSn']);
}
    //多列合并(单元格合并)
    // 参数 table节点 需要合并的字段
    tbmerf: function (table, fileds) {
    
    
        var data = table.datagrid('getRows');
        var mark = 1; //这里涉及到简单的运算,mark是计算每次需要合并的格子数
        for (var i = 1; i < data.length; i++) {
    
     //这里循环表格当前的数据
            var flg = true;
            for (let j = 0; j < fileds.length; j++) {
    
     //这里是判断每个字段对应的和上一行是否相同,相同就需要合并
                var fil = fileds[j];
                if (!(data[i][fil] === data[i - 1][fil])) {
    
    
                    flg = false;
                    break;
                }
            }
            if (flg) {
    
     //flg为true就是每个字段对应的和上一行相同,相同就需要合并
                mark += 1;
                for (let k = 0; k < fileds.length; k++) {
    
     //循环需要合并的列
                    table.datagrid('mergeCells', {
    
    
                        index: i + 1 - mark, //datagrid的index,表示从第几行开始合并;就是记住最开始需要合并的位置
                        field: fileds[k], //合并单元格的区域,就是clomun中的filed对应的列
                        rowspan: mark //纵向合并的格数,如果想要横向合并,就使用colspan:mark
                    });
                }
            } else {
    
    
                mark = 1; //一旦前后两行的值不一样了,那么需要合并的格子数mark就需要重新计算
            }
        }
    },

Note:
Although you have realized the function of merging cells at this time, it will be misplaced when you edit again. At this time, you need to call the method of merging cells again at the place where the editing is completed, so that there will be no misplacement. situation occurs.

Guess you like

Origin blog.csdn.net/pink_cz/article/details/128421178