bootstrap table 数据合并单元格
因客户需求,将表格内的数据合并单元格,如下图:
在bootstrap方法中增加onAll方法或者onLoadSuccess,因为我只是暂时做的静态页面,所以用的onAll,但是开始怎么也不合并单元格,还是加载不出来,后来发现,原来是数据还没灯加载出来就已经执行onAll方法了,所以这块给延迟了一些。
具体代码如下:
onAll : function(data) {
setTimeout(function(){
var data = $detail.bootstrapTable('getData', true);
// 合并单元格
//第二个参数是合并列的名称
mergeCells(data, "type", 1, $detail);
mergeCells(data, "sbname", 1, $detail);
mergeCells(data, "state", 1, $detail);
},100);
}
方式一:
此方法在相同数据不连续情况下会出现问题,,会导致合并不准确,因为这个方法的原理,是将所有数据里相同的条数查找出来,而不是临近的。
/**
* 合并单元格
* @param data 原始数据(在服务端完成排序)
* @param fieldName 合并属性名称
* @param colspan 合并列
* @param target 目标表格对象
*/
function mergeCells(data,fieldName,colspan,target){
//声明一个map计算相同属性值在data对象出现的次数和
// alert(22)
console.log(data)
var sortMap = {};
for(var i = 0 ; i < data.length ; i++){
for(var prop in data[i]){
// console.log(prop)
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;
}
}
方式二;
此方式是在方式一上继续改良的版本,原理是将当前数据的条数查询出来,去查找之前是否有过这条数据,若有则给之前的数据减去,这样就不会存在任何问题了,建议大家使用方式二
function mergeCells(data,fieldName,colspan,target){
//声明一个map计算相同属性值在data对象出现的次数和
// alert(22)
// todo 目前有问题,,当吧联系的时候条数也会被算在里面
var sortMap = {};
var sortMap1 = {};
var sortList = new Array();
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;
}
if (i+1<data.length) {
if (key== data[i+1][prop]) {
}else {
if(sortMap1.hasOwnProperty(key)){
sortList.push( sortMap[key]-sortMap1[key]);
sortMap1[key]=sortMap[key];
}else {
sortMap1[key]=sortMap[key];
sortList.push(sortMap[key]);
}
}
}else {
if(sortMap1.hasOwnProperty(key)){
sortList.push( sortMap[key]-sortMap1[key]);
sortMap1[key]=sortMap[key];
}else {
sortMap1[key]=sortMap[key];
sortList.push(sortMap[key]);
}
}
break;
}
}
}
console.log(sortList)
var index = 0;
for (var i=0;i<sortList.length;i++){
var count =sortList[i]*1;
$(target).bootstrapTable('mergeCells',{index:index, field:fieldName, colspan: colspan, rowspan: count});
index += count;
}
}
具体效果如下:
正文到此结束