/*
* obj: layui监听事件函数参数 obj table.on('toolbar(threeLevelTable)', function(obj){})
* withUnit: 表格设置的宽度属性 默认 with
* format:输出文件的名称加格式 默认 "地块信息列表.XLSX"
* regular(): 自定义函数过滤 templet 中的自定义内容
* */
function generateExcelFile(obj,withUnit,format,regular){
if(!obj) new Error("数据为空");
var config = obj.config;
//获取表头信息
var columns = config.cols[0].filter(obj=> obj.title != "序号");
//获取表格数据
var data = config.data;
var aoa = [];
var widthpx = [];
console.log(obj);
//记录标题头数据以及标题宽度
columns.map(itam=>{
if(!itam.hide && itam.title != "序号"){
aoa.push(itam.title);
try {
widthpx.push({'wpx':parseFloat(itam[withUnit || 'with'])*0.75 ? parseFloat(itam[withUnit || 'with'])*0.75 : 100});
}catch (err) {
alert("错误信息: " + err.message);
alert("错误原因可能为‘withUnit’参数问题,应传入表格的宽度属性");
}
}
})
//处理表格数据,根据标题头做过滤
var filteredData = data.map(function(row) {
var filteredRow = {};
for (var i = 0; i < columns.length; i++) {
var column = columns[i];
// 检查列是否被Layui筛选掉
if (!column.hide && column.field) {
if(column.templet){
//column.templet(row) ? column.templet(row) : column.templet(row);
var columne = column.templet(row);
if(columne && regular && typeof regular === 'function'){
filteredRow[column.field] = regular(columne.toString());
}else {
filteredRow[column.field] = columne;
}
}else {
filteredRow[column.field] = row[column.field];
}
}
}
return filteredRow;
});
//将表格头和表格数据拼到一起
var aoos = [];
//添加表头数据
aoos.push(aoa);
filteredData.map(row=>{
var mentid = [];
columns.map(rows=>{
if(!rows.hide)mentid.push(row[rows.field]);
})
aoos.push(mentid);
})
console.log(aoos);
var wb = XLSX.utils.book_new();
var ws = XLSX.utils.aoa_to_sheet(aoos);
//设定单元格宽度跟随表格宽度
ws['!cols'] = widthpx;
XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
XLSX.writeFile(wb, format || "地块信息列表.XLSX");
}
layui表头用templet属性实现逻辑处理后,导出时也要导出处理好的逻辑。regular(row)函数回传一份原始行数据,可以将templet属性的规则拿来处理。返回处理好的导出数据
下面是一份例子:
layui.use("table", function () {
var table = layui.table;
table.render({
elem: elm,
data: data,
page: false, //开启分页
cols: [{
field: 'PZWH', title: '批准文号', minWidth: 180, align: 'left', templet: function (d) {
return "<span>" + d.PZWH + "</span><i class='el-icon-map-location' busiType='all'></i>";
}
},
{
field: 'MPAREA', title: '地块总面积(亩)', width: 150, align: 'right', templet: function (d) {
return d.MPAREA.toFixed(4);
}
}],
height: 'full-' + h,
limit: 999,
// height: 'full+10',
toolbar: '#default',
defaultToolbar: ['filter', {
title: '导出' //标题
, layEvent: 'export' //事件名,用于 toolbar 事件中使用
, icon: 'layui-icon-export' //图标类名
}],
done: (res) => {
if (showLineColor) {
res.data.forEach((item, index) => {
/* let tdDom = $("#pane-dkxxxq .layui-table-body tbody tr[data-index='"+index+"'] td")
if(item.color && item.color != 'white'){
tdDom.css("cssText","color:#fff !important;background:"+item.color);
}*/
})
}
}
});
//监听头工具栏
table.on('toolbar(levelTable)', function (obj) {
delete Array.prototype.contains;
delete Array.prototype.max;
delete Array.prototype.min;
switch (obj.event) {
case 'export':
generateExcelFile(obj,"minWidth",null,(row)=>{
var tempDiv = document.createElement("div");
tempDiv.innerHTML = row;
if(tempDiv.querySelector("span")){
return tempDiv.querySelector("span").textContent;
}else {
return row;
}
});
break;
}
;
});
});