這篇文章主要介紹了layui如何導(dǎo)出表格全部數(shù)據(jù)，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)公司是一家朝氣蓬勃的網(wǎng)站建設(shè)公司。公司專注于為企業(yè)提供信息化建設(shè)解決方案。從事網(wǎng)站開(kāi)發(fā)，網(wǎng)站制作，網(wǎng)站設(shè)計(jì)，網(wǎng)站模板，微信公眾號(hào)開(kāi)發(fā)，軟件開(kāi)發(fā)，微信小程序，十載建站對(duì)玻璃鋼雕塑等多個(gè)方面，擁有豐富的網(wǎng)站制作經(jīng)驗(yàn)。

layui（諧音：類(lèi)UI) 是一款采用自身模塊規(guī)范編寫(xiě)的前端 UI 框架，遵循原生 HTML/CSS/JS 的書(shū)寫(xiě)與組織形式，門(mén)檻極低，拿來(lái)即用。

layui自帶的導(dǎo)出表格，只能導(dǎo)出當(dāng)前頁(yè)面，如果當(dāng)前頁(yè)包含全部數(shù)據(jù)，那不就是導(dǎo)出全部數(shù)據(jù)了嗎，所以我給導(dǎo)出事件單獨(dú)定義了一個(gè)請(qǐng)求，當(dāng)觸發(fā)這個(gè)請(qǐng)求時(shí)，在后臺(tái)查詢數(shù)據(jù)時(shí)不要按接收的page 和 limit查詢，而是查詢?nèi)浚@樣就實(shí)現(xiàn)了導(dǎo)出全部數(shù)據(jù)。

頁(yè)面代碼：

<!--導(dǎo)出按鈕 或其他觸發(fā)事件--><button class="export">導(dǎo)出報(bào)表</button><!--導(dǎo)出表 不展示--><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；        //導(dǎo)出表格        var ins1 = table.render({            elem: '#data_export',            url: "url", //數(shù)據(jù)接口            method: 'post',            title: '導(dǎo)出表的表名',            where: {                mycode: "all"            },            limit: 10,            cols: [[                {field: 'id', title: 'ID'},                {field: 'name', title: '名稱'},            ]],            done: function (res, curr, count) {                exportData = res.data;            }        });        //導(dǎo)出按鈕        $(".export").click(function () {            table.exportFile(ins1.config.id, exportData, 'xls');        });    })

后臺(tái)處理：

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

優(yōu)化：對(duì)應(yīng)的代碼是上面第二段js代碼：

//導(dǎo)出改為單獨(dú)的事件，每次點(diǎn)擊導(dǎo)出才會(huì)執(zhí)行    $(".export").click(function(){        var ins1=table.render({            elem: '#data_export',            url: "url", //數(shù)據(jù)接口            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');            }        });    })

其實(shí)就是把  table.exportFile(ins1.config.id,exportData, 'xls');  放到了done中，雖然看起來(lái)改的不多，但是本質(zhì)已經(jīng)變了，之前的方式是進(jìn)入頁(yè)面就加載隱藏的導(dǎo)出表。

而現(xiàn)在是點(diǎn)擊導(dǎo)出的時(shí)候才會(huì)渲染隱藏導(dǎo)出表，在導(dǎo)出表內(nèi)容多的時(shí)候，導(dǎo)出速度慢點(diǎn)用戶會(huì)覺(jué)得是合理的，比頁(yè)面加載速度慢要好多了。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“l(fā)ayui如何導(dǎo)出表格全部數(shù)據(jù)”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

本文題目：layui如何導(dǎo)出表格全部數(shù)據(jù)-創(chuàng)新互聯(lián)
標(biāo)題網(wǎng)址：http://chinadenli.net/article14/dgjpge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、品牌網(wǎng)站建設(shè)、用戶體驗(yàn)、全網(wǎng)營(yíng)銷(xiāo)推廣、網(wǎng)站制作、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)