杂技随笔：BootstrapTable 合并单元格

杂技随笔：BootstrapTable 合并单元格

---

前言

今天博主将为大家分享:杂技随笔：BootstrapTable 合并单元格，不喜勿喷，如有异议欢迎讨论！

---

开始

在最近写代码时遇到了一个BootStarpTbale的合并单元格问题因此记录下来以便以后回看

JavaScript代码

/**
 * 合并单元格
 * @param data  原始数据（在服务端完成排序）
 * @param fieldName 合并属性名称
 * @param colspan   合并列
 * @param target    目标表格对象
 */
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]
                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;
    }
}

在bootstrapTable加载成功执行

onLoadSuccess : function(data) {                                
                var data = $('#table').bootstrapTable('getData', true);
                //合并单元格
                mergeCells(data, "companyTypeName", 1, $('#table'));
}

在这里说一下分页也是可以显示的

---

记录第二种

/**
 * 合并单元格
 * @param data  原始数据（在服务端完成排序）
 * @param fieldName 合并属性名称
 * @param fieldName2 指定行方向可能的合并字段名称
 * @param target    目标表格对象
 * 以下方法可实现动态行与列的同时合并
 */
function mergeCells(data,fieldName,fieldName2,target){
    //声明一个map计算相同属性值在data对象   列方向上出现的次数和
    var rowsSortMap = {};    
    for(var i = 0 ; i < data.length ; i++){
        for(var prop in data[i]){
            if(prop == fieldName){
                var key = data[i][prop]
                if(rowsSortMap.hasOwnProperty(key)){
                    rowsSortMap[key] = rowsSortMap[key] * 1 + 1;
                } else {
                    rowsSortMap[key] = 1;
                }
                break;
            } 
        }
    }
  //声明一个map计算相同属性值在data对象  行方向上出现的次数和,行方向上我这里指定了另外一列 也可以向不指定从而全部进行查看
    var colsSortMap = {};
    for(var i = 0 ; i < data.length ; i++){
        for(var prop in data[i]){
            if(prop == fieldName){            	
            	for(var pp in data[i] ){
            		if(pp == fieldName2){            			
            			var key1 = data[i][prop];
            			var key2 = data[i][pp];
            			if(key1 == key2){
            				colsSortMap[key1] = 2;
            			}else{
            				colsSortMap[key1] = 1;
            			}
            			break;
            		}            		
            	}                               
            } 
        }
    };
    
    for(var prop in rowsSortMap){
        console.log(prop,rowsSortMap[prop])
    }
    for(var prop in colsSortMap){
        console.log(prop,colsSortMap[prop])
    }
      $(target).bootstrapTable('mergeCells',{index:index, field:fieldName, colspan: count, rowspan: 1});   
 
    //寻找对应字段具体值相对应的 rowsSortMap  colsSortMap 值，以防止出现乱合并的现象
    for(var i = 0 ; i < data.length ; i++){
        for(var prop in data[i]){
            if(prop == fieldName){
                var key = data[i][prop]
                var rows;
                var cols;
                for(var abc in rowsSortMap){
                	if(abc==key){
                		rows = rowsSortMap[abc] * 1;
                	}              
                }
                for(var bcd in colsSortMap){
                	if(bcd==key){
                		cols = colsSortMap[bcd] * 1;
                	}              
                }
                $(target).bootstrapTable('mergeCells',{index:i, field:fieldName, colspan: cols, rowspan: rows});
                i += rows - 1;  
                break;
            } 
        }
    }
    
    
};

以上为JS方法 实现了动态调整bootStrapTable表格，分为行方向与列方向的遍历以及对应字段值的匹配

在onloadSuccess中指定即可

onLoadSuccess:function(){
                var data = $("#famaModelList").bootstrapTable('getData', true);
                //合并单元格
                mergeCells(data, "f_code", "n_oneDayAsset",$('#famaModelList'));
}

---

到这里杂技随笔：BootstrapTable 合并单元格，分享完毕了，快去试试吧！

---

最后

• 更多参考精彩博文请看这里：《陈永佳的博客》

• 喜欢博主的小伙伴可以加个关注、点个赞哦，持续更新嘿嘿！

---