您好,登錄后才能下訂單哦!
這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)layui導(dǎo)出表格全部數(shù)據(jù)的方法,文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
layui(諧音:類UI) 是一款采用自身模塊規(guī)范編寫的前端 UI 框架,遵循原生 HTML/CSS/JS 的書寫與組織形式,門檻極低,拿來即用。layui自帶的導(dǎo)出表格,只能導(dǎo)出當(dāng)前頁面,如果當(dāng)前頁包含全部數(shù)據(jù),那不就是導(dǎo)出全部數(shù)據(jù)了嗎,所以我給導(dǎo)出事件單獨定義了一個請求,當(dāng)觸發(fā)這個請求時,在后臺查詢數(shù)據(jù)時不要按接收的page 和 limit查詢,而是查詢?nèi)?,這樣就實現(xiàn)了導(dǎo)出全部數(shù)據(jù)。
頁面代碼:
<!--導(dǎo)出按鈕 或其他觸發(fā)事件--> <button class="export">導(dǎ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'); }); })
后臺處理:
if ($mycode) { $data = M('mysql')->where($where)->select(); echo json_encode(['code' => 0, 'msg' => "", 'data' => $data]); }
優(yōu)化:對應(yīng)的代碼是上面第二段js代碼:
//導(dǎo)出改為單獨的事件,每次點擊導(dǎo)出才會執(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'); } }); })
其實就是把 table.exportFile(ins1.config.id,exportData, 'xls'); 放到了done中,雖然看起來改的不多,但是本質(zhì)已經(jīng)變了,之前的方式是進(jìn)入頁面就加載隱藏的導(dǎo)出表。
而現(xiàn)在是點擊導(dǎo)出的時候才會渲染隱藏導(dǎo)出表,在導(dǎo)出表內(nèi)容多的時候,導(dǎo)出速度慢點用戶會覺得是合理的,比頁面加載速度慢要好多了。
上述就是小編為大家分享的layui導(dǎo)出表格全部數(shù)據(jù)的方法了,如果剛好有類似的疑惑,不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。