|
|
layui.config({
|
|
|
base: './../../static/layui/layui_exts/'
|
|
|
}).use(['table', 'excel'], function () {
|
|
|
var table = layui.table //表格
|
|
|
,
|
|
|
$ = layui.$,
|
|
|
excel = layui.excel;
|
|
|
|
|
|
var LIST_TABLE_ID = "listTable"; // table ElementId
|
|
|
|
|
|
$(".export-button").click(function (e) {
|
|
|
exportFile('listTable');
|
|
|
});
|
|
|
//执行一个 table 实例
|
|
|
table.render({
|
|
|
elem: '#listTable',
|
|
|
height: 420,
|
|
|
data: [{ id: 1, username: '小毛', city: '长沙', birth: '1990-06-16', createTime: '2020-01-01', remark: '备注' }],
|
|
|
// url: './data.json', //数据接口
|
|
|
title: '用户表',
|
|
|
page: true, //开启分页
|
|
|
toolbar: '#toolbarDemo', //操作1:启用自定义模板表格头部工具栏
|
|
|
defaultToolbar: [], //操作2:隐藏头部工具栏右侧的图标
|
|
|
cols: [
|
|
|
[ //表头
|
|
|
{
|
|
|
type: 'checkbox',
|
|
|
fixed: 'left'
|
|
|
}, {
|
|
|
field: 'id',
|
|
|
title: 'ID',
|
|
|
width: 200,
|
|
|
sort: true
|
|
|
}, {
|
|
|
field: 'username',
|
|
|
title: '用户名',
|
|
|
width: 100
|
|
|
}, {
|
|
|
field: 'city',
|
|
|
title: '城市',
|
|
|
width: 100
|
|
|
}, {
|
|
|
field: 'birth',
|
|
|
title: '生日',
|
|
|
width: 120,
|
|
|
sort: true,
|
|
|
totalRow: true
|
|
|
}, {
|
|
|
field: 'createTime',
|
|
|
title: '创建日期',
|
|
|
width: 180
|
|
|
}, {
|
|
|
field: 'remark',
|
|
|
title: '备注',
|
|
|
width: 300
|
|
|
}
|
|
|
]
|
|
|
]
|
|
|
});
|
|
|
|
|
|
//监听头工具栏事件
|
|
|
table.on('toolbar(test)', function (obj) {
|
|
|
var checkStatus = table.checkStatus(obj.config.id),
|
|
|
data = checkStatus.data; //获取选中的数据
|
|
|
switch (obj.event) {
|
|
|
case 'table_export':
|
|
|
exportFile('demo')
|
|
|
break;
|
|
|
};
|
|
|
});
|
|
|
|
|
|
/**
|
|
|
* by yutons
|
|
|
* Array.from() 非常方便的将一个类数组的集合 ==》 数组，直接使用数组身上的方法。例如：常用的map，foreach…
|
|
|
* 但是，问题来了，IE不识别Array.from这个方法。所以写了它兼容IE的写法。
|
|
|
*/
|
|
|
if (!Array.from) {
|
|
|
Array.from = function (el) {
|
|
|
return Array.apply(this, el);
|
|
|
}
|
|
|
}
|
|
|
//表格导出
|
|
|
function exportFile(id) {
|
|
|
//根据传入tableID获取表头
|
|
|
var headers = $("div[lay-id=" + id + "] .layui-table-box table").get(0);
|
|
|
var htrs = Array.from(headers.querySelectorAll('tr'));
|
|
|
var titles = {};
|
|
|
for (var j = 0; j < htrs.length; j++) {
|
|
|
var hths = Array.from(htrs[j].querySelectorAll("th"));
|
|
|
for (var i = 0; i < hths.length; i++) {
|
|
|
var clazz = hths[i].getAttributeNode('class').value;
|
|
|
if (clazz != ' layui-table-col-special' && clazz != 'layui-hide') {
|
|
|
//排除居左、具有、隐藏字段
|
|
|
//修改:默认字段data-field+i,兼容部分数据表格中不存在data-field值的问题
|
|
|
titles['data-field' + i] = hths[i].innerText;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
//根据传入tableID获取table内容
|
|
|
var bodys = $("div[lay-id=" + id + "] .layui-table-box table").get(1);
|
|
|
var btrs = Array.from(bodys.querySelectorAll("tr"))
|
|
|
var bodysArr = new Array();
|
|
|
for (var j = 0; j < btrs.length; j++) {
|
|
|
var contents = {};
|
|
|
var btds = Array.from(btrs[j].querySelectorAll("td"));
|
|
|
for (var i = 0; i < btds.length; i++) {
|
|
|
for (var key in titles) {
|
|
|
//修改:默认字段data-field+i,兼容部分数据表格中不存在data-field值的问题
|
|
|
var field = 'data-field' + i;
|
|
|
if (field === key) {
|
|
|
//根据表头字段获取table内容字段
|
|
|
contents[field] = btds[i].innerText;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
bodysArr.push(contents)
|
|
|
}
|
|
|
//将标题行置顶添加到数组
|
|
|
bodysArr.unshift(titles);
|
|
|
//导出excel
|
|
|
excel.exportExcel({
|
|
|
sheet1: bodysArr
|
|
|
}, '表' + new Date().toLocaleString() + '.xlsx', 'xlsx');
|
|
|
}
|
|
|
}); |