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

杂技随笔:BootstrapTable 合并单元格

2019-06-11 11:48 1406 查看
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Mrs_chens/article/details/91370025

杂技随笔: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 合并单元格,分享完毕了,快去试试吧!

最后

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

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

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