bootstrap-table合并单元格附带可能出现的问题

在做项目时有用到bootstrap-table需要合并单元格的问题。之前是网上找的合并单元格的代码,并且测试起来也是能用,贴上代码。

function mergeCells(data,fieldName,colspan,target){
        //声明一个map计算相同属性值在data对象出现的次数和
        var sortMap = {};
        for(var i = 0 ; i < data.length ; i++){
            for(var prop in data[i]){
                if(prop == fieldName){
                    var key = data[i][prop]     //fieldName的value
                    if(sortMap.hasOwnProperty(key)){
                        sortMap[key] = sortMap[key] * 1 + 1;
                    } else {
                        sortMap[key] = 1;
                    }
                    break;
                }
            }
        }
        //合并单元格
        var index = 0;
        for(var prop in sortMap){
            var count = sortMap[prop] * 1;
            $(target).bootstrapTable('mergeCells',{index:index, field:fieldName, colspan: colspan, rowspan: count});
            index += count;
        }
    }

因为后端已经将表格的顺序排好了再返回过来。这样会有一种问题出现。

在图中红框处加入一条数据,分别是“周星驰、科长 橘右京 梁朝伟 王一、王大锤0821”

加完后会发现,原本在画红框位置的“党委书记 李云龙”被合并到上一个了,下一行却多了一个科长橘右京

分析后发现,因为这边保存是通过sortMap.hasOwnProperty(key)判断key存不存在。而正确方法是判断当前的key是否和上一个key一样,一样的话才进行合并。如图:

最终的代码如下:

function mergeCells(data, fieldName, colspan, target) {
        //声明一个map计算相同属性值在data对象出现的次数和
        var sortMap = [];
        var lastKey;
        for (var i = 0; i < data.length; i++) {
            for (var prop in data[i]) {
                if (prop == fieldName) {
                    var key = data[i][prop];
                   if (key == lastKey){
                       sortMap[sortMap.length-1].val += 1;
                   }else {
                       sortMap.push({
                           key:key,
                           val:1
                       })
                       lastKey= key;
                   }
                    break;
                }
            }
        }
        var index = 0;
        for (var i = 0; i < sortMap.length; i++) {
            var item = sortMap[i];
            var count = item.val * 1;
            target.bootstrapTable('mergeCells', {index: index, field: fieldName, colspan: colspan, rowspan: count});
            index += count;
        }
    }

猜你喜欢

转载自blog.csdn.net/a1085578081/article/details/108509202