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',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',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’就可以了。