【转载】layui表格控件的使用和表格数据传值

摘自layui数据表格中导出所有数据的简易解决办法

在使用表格时，官网文档说用这个语法

table.exportFile(id, data, type)

来传递数据，但是我们使用时总是会报错

这是一张layui表格的界面 图片地址

表格导出按钮

html界面代码
注意：下面的代码中，“导出”按钮的id为“export”，表格的id为table1。

<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>

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、在表格渲染完成后的回调函数中，定义一个全局变量exportData，让它取得表格中的数据集合。就是下面这行

exportData=res.data;

2、在导出数据时将变量exportData作为data变量传给table.exportFile(id, data, type) 函数。这样就大功告成了，怎么样，是不是很简单！

3、需要说明的是：table.exportFile函数的第三个参数type默认是导出csv格式文件，要导出xls文件的话，把它设置成‘xls’就可以了。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaomayi721025/article/details/88994482