数据全部导出，半成品，需要加载等待，不科学
<!DOCTYPE html>
<head>
<!-- <meta http-equiv="Content-Type" content="text/html; charset=gbk2312" /> -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="layui-2.7.4/css/layui.css" media="all">
</head>
<body>
<br>
<div class="layui-row layui-col-space0">
<div class="layui-col-md1">
.
</div>
<div class="layui-col-md10">
<form class="layui-form" action="">
<div class="layui-inline">
<!-- 注意：这一层元素并不是必须的 -->
<input type="text" class="layui-input layui-btn-sm" style="width:160px;height:30px" id="daterange" name="daterange" placeholder='选择日期'>
</div>
<div class="layui-inline">
<!-- 注意：这一层元素并不是必须的 -->
<input type="text" class="layui-input layui-btn-sm" style="width:100px;height:30px" id="dptid" name="dptid" placeholder='门店编码'>
</div>
<div class="layui-inline">
<!-- 注意：这一层元素并不是必须的 -->
<input type="text" class="layui-input " style="width:100px;height:30px" id="gdsid" name="gdsid" placeholder='商品编码'>
</div>
<div class="layui-input-inline">
<button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit lay-filter="formfilter">搜 索</button>
<button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
<button class="layui-btn layui-btn-warm layui-btn-sm" lay-submit lay-filter="exporxlsx">数据导出</button>
</div>
</form>
<!-- 原始容器 -->
<table align="center" id="demo" lay-filter="test"></table>
<table align="center" id="export_all" lay-filter="all"></table>
</div>
<div class="layui-col-md1">
1/12
</div>
</div>
</body>
</html>
<!-- 工具栏模板： -->
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数</button>
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
</div>
</script>
<script src="layui-2.7.4/layui.js" type="text/javascript"></script>
<script src="js/xlsx.full.min.js" type="text/javascript"></script>
<script>
layui.use(['form', 'laydate', 'table', 'jquery'], function() {
var laydate = layui.laydate;
var form = layui.form;
var $ = layui.$;
var table = layui.table
// 表格1渲染 table #id
table.render({
elem: '#demo',
toolbar: '#toolbarDemo',
// ,toolbar: 'default'//工具条（添加，删除，修改图标）
url: "test/test5.do",
method: "post",
page: { //分页配置支持传入laypage组件的所有参数（某些参数除外，如：jump/elem)
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'], //refresh刷新
// first: "首页",
// last: "末页",
prev: "上一页",
next: "下一页",
curr: 1, //当前页.第一次进入默认到第1页
groups: 5, //当有多个页时，页面上展示页码个数
limit: 5,
limits: [5, 10, 20, 50, 100, 1000, 10000],
// theme: '#FFFFFF'
},
// ,skin:"line"
// ,height:'full-265'
height: '250',
width: '1000',
even: true,
title: "导出文件名称",
cols: [
[ //表头
{title: 'No.',type: "numbers",width: 60,fixed: 'left'},
{type: "checkbox",width: 50,fixed: 'left'},
{field: 'id',title: 'ID',width: 80,sort: true,hide: 'true'},
{field: 'gdsid',title: '商品编码',width: 120,sort: true},
{field: 'gdsdes',title: '商品名称',width: 380,sort: true},
{field: 'dptid',title: '门店编码',width: 120,sort: true},
{field: 'recorddate',title: '记录日期',width: 160,sort: true},
{field: 'record',title: '记录人',width: 80,sort: true},
]
],
initSort: {
field: 'recorddate' //排序字段，对应 cols 设定的各字段名
,
type: 'desc' //排序方式 asc: 升序、desc: 降序、null: 默认排序
},
done: function(res, curr, count) {
//res.data 存储到本地变量
// listData = res.data;
// console.log(count);
// layer.msg(listData['length']);
// console.log(listData["length"]);
// table.exportFile('表格ID',res.data,'xlsx' );
// 装载变量，去掉为空的
var resultData = {};
var gdsid,dptid,daterange;
gdsid = document.getElementById('gdsid').value;
dptid = document.getElementById('dptid').value;
daterange = document.getElementById('daterange').value;
// console.log(resultData);
if (gdsid != '')
resultData.gdsid = gdsid;
if (dptid != '')
resultData.dptid = dptid;
if (daterange != '')
resultData.daterange = daterange;
// 表格2 重载
table.reloadData('export_all', {where: resultData});
},
parseData: function(res) {
// console.log(res)
}
});
// 表格2渲染
table.render({
elem: '#export_all',
url: "test/test5.do",
method: "post",
page: {limit: 100},
title: "导出文件名称",
cols: [
[ //表头
{title: 'No.',type: "numbers",width: 60,fixed: 'left'},
{type: "checkbox",width: 50,fixed: 'left'},
{field: 'id',title: 'ID',width: 80,sort: true,hide: 'true'},
{field: 'gdsid',title: '商品编码',width: 120,sort: true},
{field: 'gdsdes',title: '商品名称',width: 380,sort: true},
{field: 'dptid',title: '门店编码',width: 120,sort: true},
{field: 'recorddate',title: '记录日期',width: 160,sort: true},
{field: 'record',title: '记录人',width: 80,sort: true},
]
],
height: '250',
width: '1000',
done: function(res, curr, count) {
//res.data 存储到本地变量
listData = res.data;
// layer.msg(listData['length']);
// console.log(listData["length"]);
// table.exportFile('表格ID',res.data,'xlsx' );
}
});
// 工具栏控件 table lay-filter
table.on('toolbar(test)', function(obj) {
console.log(obj);
var checkStatus = table.checkStatus
});
//绑定日期空间
laydate.render({
elem: '#daterange' //指定元素
,
range: true,
format: 'yyyy-MM-dd' //可任意组合
,
trigger: 'click' //采用click弹出
// ,show: true //直接显示
,
showBottom: true
});
//执行搜索 重载(仅重载数据) button formfilter
form.on('submit(formfilter)', function(data) {
//装载变量，去掉为空的
var resultData = {};
if (data.field.gdsid != '')
resultData.gdsid = data.field.gdsid;
if (data.field.dptid != '')
resultData.dptid = data.field.dptid;
if (data.field.daterange != '')
resultData.daterange = data.field.daterange;
// console.log(resultData);
//执行表格渲染
table.reloadData('demo', {
// url: 'test/test5.do',
// method: 'post',
// page: {
// curr: 1
// },
page: { //分页配置支持传入laypage组件的所有参数（某些参数除外，如：jump/elem)
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'], //refresh刷新
first: "首页",
last: "末页",
prev: "上一页",
next: "下一页",
curr: 1, //当前页.第一次进入默认到第1页
groups: 5, //当有多个页时，页面上展示页码个数
limit: 10,
limits: [5, 10, 20, 50],
// theme: '#FFFFFF'
},
where: resultData
}, 'data');
return false;
});
// 导出 插件xlsx.full.min.js
form.on('submit(exporxlsx)', function() {
var expertData = listData;
// console.log(expertData["length"])
if (expertData['length'] == '' || expertData["length"] == 0) {
layer.msg('内容为空,无法导出！', {
icon: 2
});
return false;
}
var dataList = new Array();
for (let index in expertData) {
dataList.push({
// '序号': Number(index) + 1,
'ID': expertData[index].id,
'商品编码': expertData[index].gdsid,
'商品名称': expertData[index].gdsdes,
'门店': expertData[index].dptid,
'记录日期': expertData[index].recorddate,
'记录人': expertData[index].record,
})
};
// console.log(dataList);
var ws = XLSX.utils.json_to_sheet(dataList);
var wb = XLSX.utils.book_new(); /*新建book*/
XLSX.utils.book_append_sheet(wb, ws, "sheet1");
XLSX.writeFile(wb, "数据导出.xlsx"); /*写文件(book,xlsx文件名称)*/
});
});
</script>
标签：width,半成品,data,title,导出,field,全部,table,true From： https://www.cnblogs.com/juices/p/16646132.html