layui數據表格中導出所有數據的簡易解決辦法

• 官方文檔的困惑
• 解決辦法

 

官方文檔的困惑

首先要說明的是：layui在 table 的工具欄內置了數據導出按鈕，如果你是用它內置的導出按鈕來導出數據，是沒有問題的。但內置的按鈕畢竟不太美觀，很多時候你可能想通過自己定義的按鈕來導出數據，這個時候，我們去參考官方文檔，會發現，官方的介紹是非常模糊不清的，請看官方的介紹：
語法：table.exportFile(id, data, type)
代碼示例：

var ins1 = table.render({
  elem: '#demo'
  ,id: 'test'
  //,…… //其它參數
})      
      
//將上述表格示例導出為 csv 文件
table.exportFile(ins1.config.id, data); //data 為該實例中的任意數量的數據

絕大多數盆友被這個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>

注意：上面代碼中“導出”按鈕的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、在表格渲染完成后的回調函數中，定義一個全局變量exportData，讓它取得表格中的數據集合。就是下面這行

exportData=res.data;

2、在導出數據時將變量exportData作為data變量傳給table.exportFile(id, data, type) 函數。這樣就大功告成了，怎么樣，是不是很簡單！

3、需要說明的是：table.exportFile函數的第三個參數type默認是導出csv格式文件，要導出xls文件的話，把它設置成‘xls’就可以了。