在做项目时有用到bootstrap-table需要合并单元格的问题。之前是网上找的合并单元格的代码,并且测试起来也是能用,贴上代码。
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] //fieldName的value
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;
}
}
因为后端已经将表格的顺序排好了再返回过来。这样会有一种问题出现。
在图中红框处加入一条数据,分别是“周星驰、科长 橘右京 梁朝伟 王一、王大锤0821”
加完后会发现,原本在画红框位置的“党委书记 李云龙”被合并到上一个了,下一行却多了一个科长橘右京
分析后发现,因为这边保存是通过sortMap.hasOwnProperty(key)判断key存不存在。而正确方法是判断当前的key是否和上一个key一样,一样的话才进行合并。如图:
最终的代码如下:
function mergeCells(data, fieldName, colspan, target) {
//声明一个map计算相同属性值在data对象出现的次数和
var sortMap = [];
var lastKey;
for (var i = 0; i < data.length; i++) {
for (var prop in data[i]) {
if (prop == fieldName) {
var key = data[i][prop];
if (key == lastKey){
sortMap[sortMap.length-1].val += 1;
}else {
sortMap.push({
key:key,
val:1
})
lastKey= key;
}
break;
}
}
}
var index = 0;
for (var i = 0; i < sortMap.length; i++) {
var item = sortMap[i];
var count = item.val * 1;
target.bootstrapTable('mergeCells', {index: index, field: fieldName, colspan: colspan, rowspan: count});
index += count;
}
}