关于bootstrapTable的用法（1）-合并单元格

最新推荐文章于 2024-01-20 16:06:00 发布

置顶领风者

最新推荐文章于 2024-01-20 16:06:00 发布

阅读量1.6k

点赞数 1

分类专栏： js bootstrapTable 文章标签： bootstrapTable

本文链接：https://blog.csdn.net/qq_43619832/article/details/96901841

版权

js 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

bootstrapTable

4 篇文章 0 订阅

订阅专栏

@关于bootstrapTable的用法（1）-合并单元格
在平时使用bootstrapTable时，有时需要合并单元格，以下是合并的用法
单行合并时

//在bootstrapTable最后面加上
 onLoadSuccess : function(data) {                
  		var data = $('#table').bootstrapTable('getData', true);
       //合并单元格
       mergeCells(data, "需合并的属性", 1, $('#table'));
}

//合并的函数
/**
     * 合并单元格
	 * @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;
	    	} 
	  	 }
	  }
	  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, "属性1", "需合并的属性（属性1）", 1, $('#table'));
	mergeCells(data, "属性1", "需合并的属性（属性2）", 1,  $('#table'));
}

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

单行和多行合并的函数差不多是一样的，只是比较的时候比较的对象不一样

单行合并效果图

多行合并效果图

参考文章
bootstrap table实现合并单元格效果