原创

bootstrap table 数据合并单元格

因客户需求,将表格内的数据合并单元格,如下图:
file
在bootstrap方法中增加onAll方法或者onLoadSuccess,因为我只是暂时做的静态页面,所以用的onAll,但是开始怎么也不合并单元格,还是加载不出来,后来发现,原来是数据还没灯加载出来就已经执行onAll方法了,所以这块给延迟了一些。
具体代码如下:

onAll  : function(data) {
                setTimeout(function(){
                    var data = $detail.bootstrapTable('getData', true);
                    // 合并单元格
                //第二个参数是合并列的名称
                    mergeCells(data, "type", 1, $detail);
                    mergeCells(data, "sbname", 1, $detail);
                    mergeCells(data, "state", 1, $detail);

                },100);

              }

方式一:
此方法在相同数据不连续情况下会出现问题,,会导致合并不准确,因为这个方法的原理,是将所有数据里相同的条数查找出来,而不是临近的。

 /**
     * 合并单元格
     * @param data  原始数据(在服务端完成排序)
     * @param fieldName 合并属性名称
     * @param colspan   合并列
     * @param target    目标表格对象
     */
    function mergeCells(data,fieldName,colspan,target){
        //声明一个map计算相同属性值在data对象出现的次数和
      //  alert(22)
       console.log(data)
        var sortMap = {};
        for(var i = 0 ; i < data.length ; i++){
            for(var prop in data[i]){
               // console.log(prop)
                if(prop == fieldName){
                    var key = data[i][prop]
                    if(sortMap.hasOwnProperty(key)){
                        sortMap[key] = sortMap[key] * 1 + 1;
                    } else {
                        sortMap[key] = 1;
                    }
                    break;
                }
            }
        }
        for(var prop in sortMap){
            console.log(prop,sortMap[prop])
        }
        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;
        }
    }

方式二;
此方式是在方式一上继续改良的版本,原理是将当前数据的条数查询出来,去查找之前是否有过这条数据,若有则给之前的数据减去,这样就不会存在任何问题了,建议大家使用方式二

function mergeCells(data,fieldName,colspan,target){
        //声明一个map计算相同属性值在data对象出现的次数和
      //  alert(22)
        // todo 目前有问题,,当吧联系的时候条数也会被算在里面
        var sortMap = {};
        var sortMap1 = {};
        var sortList = new Array();
        for(var i = 0 ; i < data.length ; i++){
            for(var prop in data[i]){
                if(prop == fieldName){
                    var key = data[i][prop]
                    if(sortMap.hasOwnProperty(key)){
                        sortMap[key] = sortMap[key] * 1 + 1;
                    } else {
                        sortMap[key] = 1;
                    }
                    if (i+1<data.length) {
                        if (key== data[i+1][prop]) {

                        }else {
                            if(sortMap1.hasOwnProperty(key)){
                                sortList.push( sortMap[key]-sortMap1[key]);
                                sortMap1[key]=sortMap[key];
                            }else {
                                sortMap1[key]=sortMap[key];
                                sortList.push(sortMap[key]);
                            }


                        }
                    }else {
                        if(sortMap1.hasOwnProperty(key)){
                            sortList.push( sortMap[key]-sortMap1[key]);
                            sortMap1[key]=sortMap[key];
                        }else {
                            sortMap1[key]=sortMap[key];
                            sortList.push(sortMap[key]);
                        }
                    }
                    break;
                }
            }
        }
        console.log(sortList)
        var index = 0;
        for (var i=0;i<sortList.length;i++){
            var count =sortList[i]*1;
            $(target).bootstrapTable('mergeCells',{index:index, field:fieldName, colspan: colspan, rowspan: count});
            index += count;
        }

    }

具体效果如下:
file

正文到此结束
本文目录