您的位置:首页 > Web前端 > BootStrap

BootstrapTable 插件合并单元格

2017-07-27 16:49 369 查看

BootstrapTable 插件合并单元格

客户端运用bootstrapTable 的mergeCells属性合并单元格来达到报表分析展示的直观效果

JavaScript代码

声明mergeCells函数,如:

/**
* 合并单元格
* @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'));

},


效果图

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  bootstrap mergeCells