项目需要导出不规则数据,根据他的js改完后,发现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]
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 mergeOtherCells(data, fieldName,otherName, colspan, target) {
var sort = Array();
var num = 1;
for (var i = 0; i < data.length - 1; i++) {
for ( var prop in data[i]) {
if (prop == fieldName) {
if (data[i][prop] == data[i + 1][prop]) {
num++;
if (i == data.length - 2) {
sort.push(num);
}
} else {
sort.push(num);
num = 1;
}
break;
}
}
}
var index = 0;
for (var j = 0; j < sort.length; j++) {
var count = sort[j];
$(target).bootstrapTable('mergeCells', {
index : index,
field : otherName,
colspan : colspan,
rowspan : count,
});
index += count;
}
};
如何导出不规则table呢???
使用table2excel,js 网上有很多,自行下载,初始化方法
$("#bootstrap-table").table2excel({
exclude: ".noExl",
name: d2+"_"+d1+"统计汇总",
// columns: 10,//指定不导出列 实例:columns: "0,1,2,3",下标从0开始,代表不导出第一列--第四列
filename: d2+"_"+d1+"统计汇总",
fileext: ".xls",
exclude_img : true,
exclude_links : true,
exclude_inputs : true
})
注意事项:上述两个合并单元格的方法本色纸是加上列宽,然后隐藏不需要显示的列,而导出方法会将display为none的元素导出,导致excel显示错误,
因此,通过获取到当前所有为display为none的元素,代码如下:
onLoadSuccess: function (data) {
var table = KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲bootstrap-table…(“td:hidden”);
$.each(tdList,function(i,object){
$(object).addClass(‘noExl’);
})
},
解释下代码:这个函数是table数据全部加载完毕后触发的函数,最下面就是获取隐藏元素,然后给他加上noExl,为什么加这个呢?table2excel.js默认会将加上此类的元素排除掉,也就不会导出来,这样完毕后,导出逇表格也正常了,如果想要导出的表格样式好看,可以修改源码,如果觉得这篇文章对你有用的话,点个赞把,可以留言告诉我你不懂的地方,我会一一解答。