BootStrap_table实现动态合并单元格

最新推荐文章于 2024-09-28 17:19:16 发布

coderByCoder

最新推荐文章于 2024-09-28 17:19:16 发布

阅读量5k

点赞数 2

分类专栏： BootStrap

本文链接：https://blog.youkuaiyun.com/coderByCoder/article/details/79898942

版权

BootStrap 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用JS方法动态调整BootStrapTable，包括行和列方向的遍历以及字段值匹配，以实现表格单元格的动态合并。在onloadSuccess事件中应用该方法，可以达到预期的展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/**
 * 合并单元格
 * @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(){
                console.log("load OK");
                //listTable.resetWidth();
                listTable.bootstrapTable("resetView"/*,{silent: true}*/);
                listTable.bootstrapTable("resetView"/*,{silent: true}*/);
                var data = $("#famaModelList").bootstrapTable('getData', true);
                //合并单元格
                mergeCells(data, "f_code", "n_oneDayAsset",$('#famaModelList'));
                
                //resetWidth
            }

展示效果