layui数据表格中导出所有数据的简易解决办法
layui数据表格中导出所有数据的简易解决办法
官方文档的困惑
首先要说明的是：layui在 table 的工具栏内置了数据导出按钮，如果你是用它内置的导出按钮来导出数据，是没有问题的。但内置的按钮毕竟不太美观，很多时候你可能想通过自己定义的按钮来导出数据，这个时候，我们去参考官方文档，会发现，官方的介绍是非常模糊不清的，请看官方的介绍：
语法：table.exportFile(id, data, type)
代码示例：
var ins1 = table.render({
elem: '#demo'
,id: 'test'
//,…… //其它参数
})
//将上述表格示例导出为 csv 文件
table.exportFile(ins1.config.id, data); //data 为该实例中的任意数量的数据
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
绝大多数盆友被这个data变量弄懵逼了，如果直接用它，浏览器会无情的提示：“Uncaught ReferenceError: data is not defined”。
其实，官方例子中的这个data变量，应该是表格数据的集合，但是，官方没说清楚这个data数据要从哪里来，以致于很多小伙伴被弄得一头雾水。
解决办法
先看前端界面
例如，我要通过单击上图中的“导出”按钮来导出表格中的所有数据，那么我们在html文件中的代码可以像下面这样写：
<!--工具栏-->
<okToolbar>
<button class="layui-btn" id="addUser">
<i class="iconfont icon-tianjiayonghu1" ></i> 添加
</button>
<button class="layui-btn layui-btn-danger" id="batchDel">
<i class="iconfont icon-shanchu"></i> 删除
</button>
<button class="layui-btn layui-btn-warm" id="batchDisabled">
<i class="iconfont icon-tingyong"></i> 锁定
</button>
<button class="layui-btn layui-btn-normal" id="batchEnabled">
<i class="iconfont icon-qiyong"></i> 解锁
</button>
<button class="layui-btn" id="export">
<i class="iconfont icon-export"></i> 导出
</button>
<span>共有数据：<i id="countNum"></i> 条</span>
</okToolbar>
<!--数据表格-->
<table class="layui-hide" id="table1" lay-filter="tableFilter"></table>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
注意：上面代码中“导出”按钮的id为“export”，表格的id为table1。
js代码：
<script>
layui.use(['element', 'table', 'form', 'jquery', 'laydate','layer'], function () {
var table = layui.table; //表格
var form = layui.form; //表单
var layer = layui.layer; //弹层
var $ = layui.jquery;
var ins1=table.render({
elem: '#table1',
url: '/ant-admin/data/user.json',
limit: 10,
page:true,
cols: [[
{type: 'checkbox'},
{field: 'id', title: 'ID',width:80, sort: true,align: 'center'},
{field: 'username', title: '用户名', sort: true,align: 'center'},
{field: 'status', title: '状态', templet: '#statusTpl',align: 'center'},
{field: 'role', title: '角色类型', templet: '#roleTpl',sort: true,align: 'center'},
{field: 'phone', title: '手机',align: 'center'},
{field: 'createTime', title: '创建时间',align: 'center'},
{field: 'lastLoginTime', title: '最近登录时间',align: 'center'},
{field: 'logins', title: '登陆次数',sort: true,align: 'center',width:100},
{fixed: 'right', title: '操作', align:'center', minWidth:160,toolbar: '#barDemo'}
]],
done: function (res, curr, count) {
exportData=res.data;
}
});
$("#export").click(function(){
table.exportFile(ins1.config.id,exportData, 'xls');
})
})
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
要点：
1、在表格渲染完成后的回调函数中，定义一个全局变量exportData，让它取得表格中的数据集合。就是下面这行
exportData=res.data;
- 1
2、在导出数据时将变量exportData作为data变量传给table.exportFile(id, data, type) 函数。这样就大功告成了，怎么样，是不是很简单！
3、需要说明的是：table.exportFile函数的第三个参数type默认是导出csv格式文件，要导出xls文件的话，把它设置成‘xls’就可以了。
