layui導出表格全部數據

2020.1.16

最近終於又用到了導出表格，我在實際項目里使用了上次發現的導出全部數據方法，然后遇到了一些問題，並進行了解決，終於可以正式寫在博客中了。

整體代碼：

        <div style="display: none">
            <table id="table">

            </table>
        </div>

        //導出表格配置
        table.render({
            elem: '#table',
            id: 'exportTable',
            title: '導出的文件名',
            cols: [[ //表頭
                {
                    field: 'uid',
                    title: 'ID',
                }, {
                    field: 'uname',
                    title: '姓名',
                }
            ]]
        });
        //導出事件
        $('#export').on('click',function () {
            //使用ajax請求獲取所有數據
            $.ajax({
                url: "url",
                type: 'post',
                data: {
                    type: 1
                },
                async: false,
                dataType: 'json',
                success: function (res) {
                    //使用table.exportFile()導出數據
                    table.exportFile('exportTable', res.data, 'xls');
                }
            });
        });

遇到的問題與解決方法：

1.明明代碼沒有錯，但是導出的表格沒有數據。

因為 table.exportFile('exportTable', res.data, 'xls') 中使用的這個layui表格，必須已經實例化過了，才能拿到字段和文件名等配置，因此加了一個隱藏表，終究還是要加隱藏表，但是省略了表數據的渲染，節省了速度。

2.導出的文件名怎么設置。

table.exportFile('exportTable', res.data, 'xls') 中的這個 exportTable 表格，它的 title 將會成為導出文件名。

3.長數字會變成科學計數法，日期會變成#。

關於這個問題之前在這篇博客的評論中討論過，解決辦法是通過js遍歷數據，在長數字后加上 \t，但是如果數據多了再在js內遍歷會增加耗時，於是我嘗試在后端處理，經過測試后發現在長數字、日期后面拼接 &nbsp ，可以實現阻止科學計數法，本來數據庫的數據取出來的時候，就要在后端遍歷處理數據，所以在后端一起處理長數字、日期，無疑比js再去遍歷一遍要好。

4.第三條沒有效果。

我使用的layui.js是layui-v2.5.4，我遇到過加了 &nbsp 沒有效果，測試后發現是layui.js的版本問題，目前已知2.5.4是有效的。

 

2020.1.16之前正文已經是我探索的一個過程了，感興趣可以看看，不感興趣的可以忽略掉。

最后，我希望我的關於解決問題的博客，是簡潔明了，能夠確實幫助讀者解決問題的博客。預祝各位新年快樂！

 

2019.12.30（2020.1.16進行改動）

距離這篇隨筆第一次發布五個月后，再回頭來看，確實有更好的方法。我在這篇隨筆的評論里看到了更方便的辦法，不需要實例化一個新的表格就能實現使用layui導出全部數據，我也去搜了一下類似的方法，發現其他博客有的早已提到這種方法，不過我當時實現這個功能時沒發現，我已經將此方法，寫在了評論中(9樓)，因為內容基本不能再算成我的原創，並且其他博客有的也已經說過了，layui文檔也有，是我不夠細心(當然與我並非前端也有關系，當時看到那幾篇博客時，通篇代碼太多了，看的頭大)，實在不好意思更新到正文了。

layui文檔：

 當時沒有放到正文的代碼圖：

 

 2019.7.10

layui自帶的導出表格，只能導出當前頁面，如果當前頁包含全部數據，那不就是導出全部數據了嗎，所以我給導出事件單獨定義了一個請求，當觸發這個請求時，在后台查詢數據時不要按接收的page 和 limit查詢，而是查詢全部，這樣就實現了導出全部數據。

頁面代碼：

<!--導出按鈕 或其他觸發事件-->
<button class="export">導出報表</button>

<!--導出表 不展示-->
<div style="display: none;">
    <table id="data_export">
    </table>
</div>

    layui.use(['form', 'table', 'layer'], function () {
        var table = layui.table,
            form = layui.form,
            layer = layui.layer；
        //導出表格
        var ins1 = table.render({
            elem: '#data_export',
            url: "url", //數據接口
            method: 'post',
            title: '導出表的表名',
            where: {
                mycode: "all"
            },
            limit: 10,
            cols: [[
                {field: 'id', title: 'ID'},
                {field: 'name', title: '名稱'},
            ]],
            done: function (res, curr, count) {
                exportData = res.data;
            }
        });
        //導出按鈕
        $(".export").click(function () {
            table.exportFile(ins1.config.id, exportData, 'xls');
        });
    })

后台處理：

if ($mycode) {
    $data = M('mysql')->where($where)->select();  
    echo json_encode(['code' => 0, 'msg' => "", 'data' => $data]);                     
}

 

后來我又優化了一下，對應的代碼是上面第二段js代碼：

    //導出改為單獨的事件，每次點擊導出才會執行
    $(".export").click(function(){
        var ins1=table.render({
            elem: '#data_export',
            url: "url", //數據接口
            method: 'post',
            title: '表名',
            where: {
                mycode: "all"
            },
            limit: 10,
            cols: [[
                {field: 'id', title: 'ID'},
                {field: 'name', title: '名字'},
            ]],
            done: function (res, curr, count) {
                exportData=res.data;
                table.exportFile(ins1.config.id,exportData, 'xls');
            }
        });
    })

其實就是把  table.exportFile(ins1.config.id,exportData, 'xls');  放到了done中，雖然看起來改的不多，但是本質已經變了，之前的方式是進入頁面就加載隱藏的導出表，而現在是點擊導出的時候才會渲染隱藏導出表，在導出表內容多的時候，導出速度慢點用戶會覺得是合理的，比頁面加載速度慢要好多了。