bootstrap-table动态合并相同行和列的方法
var getData = ctx + "demo/table/list";
$("#table").bootstrapTable(
{
dataType : "json",
method : 'post',
cache : false,
url : getData,
columns : [
{
checkbox : true
},
{
field : 'userId',
title : '用户ID'
},
{
field : 'userCode',
title : '用户编号'
},
{
field : 'userName',
title : '用户姓名'
},
{
field : 'userPhone',
title : '用户手机'
},
{
field : 'userEmail',
title : '用户邮箱'
},
{
field : 'userBalance',
title : '用户余额'
},
{
title : '操作',
align : 'center',
formatter : function(value, row, index) {
var actions = [];
actions
.push('<a class="btn btn-danger btn-xs" href="javascript:;" onclick="remove(this)"><i class="fa fa-remove"></i>删除</a>');
return actions.join('');
}
} ],
onLoadSuccess : function(data) {
var data = $('#table').bootstrapTable(
'getData', true);
//合并单元格
mergeCells($('#table'), data, "userName", 1);
mergeCells($('#table'), data, "userPhone", 1);
mergeCells($('#table'), data, "userEmail", 1);
//
mergeColspan($('#table'), data, [ "userId","userCode" ]);//列合并
}
});
/**
* 合并行
* @param data 原始数据(在服务端完成排序)
* @param fieldName 合并属性名称
* @param colspan 合并列
* @param target 目标表格对象
*/
function mergeCells(target, data, fieldName, colspan) {
//声明一个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;
}
}
/**
* 合并列
* @param data 原始数据(在服务端完成排序)
* @param fieldName 合并属性数组
* @param target 目标表格对象
*/
function mergeColspan(target, data, fieldNameArr) {
if (data.length == 0) {
alert("不能传入空数据");
return;
}
if (fieldNameArr.length == 0) {
alert("请传入属性值");
return;
}
var num = -1;
var index = 0;
for (var i = 0; i < data.length; i++) {
num++;
for ( var v in fieldNameArr) {
index = 1;
if (data[i][fieldNameArr[v]] != data[i][fieldNameArr[0]]) {
index = 0;
break;
}
}
if (index == 0) {
continue;
}
$(target).bootstrapTable('mergeCells', {
index : num,
field : fieldNameArr[0],
colspan : fieldNameArr.length,
rowspan : 1
});
}
}
原文链接:https://blog.youkuaiyun.com/tianshan2010/article/details/117135572