碼上快樂

相關內容    簡體    繁體

徹底搞懂 Layui中的數據表格，更改請求參數等

本文轉載自   查看原文   2020-09-22 14:02   3771    Layui

Layui中的table

首先抄送一下官網的話
在這里插入圖片描述
我們先來看一下案例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Layui中的表格</title> <link rel="stylesheet" href="./layui/css/layui.css" /> <script src="./layui/layui.js"></script> </head> <body> <!-- --> <table id="test" lay-filter="test"></table> </body> </html> <script> layui.use('table', function () { var table = layui.table // 第一個實例 table.render({ elem: '#test', // 指定table模板 也就是上方的table DOM height: 400, // 指定Table模板的高度 url: '/config/user.json', // 對應的數據接口，這邊直接是請求的json文件 page: true, // 開啟分頁 cols: [ [ //表頭》》》指定的對應字段 { field: 'id', title: 'ID', sort: true, fixed: 'left' }, { field: 'username', title: '用戶名' }, { field: 'sex', title: '性別', sort: true }, { field: 'city', title: '城市' }, { field: 'sign', title: '簽名' }, { field: 'experience', title: '積分', sort: true }, { field: 'score', title: '評分', sort: true }, { field: 'classify', title: '職業' }, { field: 'wealth', title: '財富', sort: true }, ], ], }) }) </script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42

實現效果
在這里插入圖片描述
其實按照我個人的理解的話其實就是像ajax請求后台列表數據，包括樣式，layui這個框架就全部集成給你做了，你不需要再去手動寫樣式，當然你如果要添加自定義列還是要自己手動寫一下，例如我們在表格最后方添加一個編輯和刪除。

在這里插入圖片描述
我們可以看到我在cols中最后的位置添加了templet，里面放置了一串模板字符串（如果有ie兼容需求的話，最好不要使用模板字符串），再有的話，我們可以看到在里面我用到了{{ }}這個東西，這個東西現在不是叫插值表達式，layui有對他的特定叫法 layui.laytpl。不過其實用處並不是很廣范，我們在這里使用就可以了。
其實像指定表格自定義列的話，也不單單只有這一種指定方式，也還有像
在這里插入圖片描述

第三種方式
在這里插入圖片描述
我們來看一下這三種方式實現的效果
在這里插入圖片描述
自定義格也還有像toobar去指定模板，那種方式也是可以實現的，有興趣的同學可以根據官網自己去嘗試一下

接下來我們就應該點擊編輯 或搜索觸發一系列事件了，那么我們怎么去獲取對應這一行的數據呢？

layui給我們提供了一個方法，其實也就是監聽table表格中的事件，那么如何去監聽呢？

// 點擊表格頭部，內部一些 dom上綁定了lay-event=""屬性的一些節點所操作的事件 // tool中的test其實就是表格table節點的 lay-filter="test"這個屬性值 table.on('tool(test)',function(obj){ // 在里面我們可以根據lay-event的值去進行相應的判斷 if (layEvent === 'del') { console.log(123) //刪除 layer.confirm('真的刪除行么', function (index) { obj.del() //刪除對應行（tr）的DOM結構，並更新緩存 layer.close(index) //向服務端發送刪除指令 }) } else if (layEvent === 'edit') { // 編輯 // 數據回顯 $('#username').val() // ...等等 } })
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

我們現在可以看一下表格圖，其實我們的分頁是已經開啟了的
在這里插入圖片描述
每當我們去點擊分頁時，表格會自動像我們填寫的地址發起請求
在這里插入圖片描述
那么這樣就好了嗎？
肯定不行，我們如果把前端請求參數手動寫死的話，如果后端查詢的參數值不叫page？limit？叫pageNum，pageSize？怎么辦呢？
其實layui也給了我們解決辦法
我們只需要在配置項中添加一個request即可
在這里插入圖片描述
這樣的話其實我們就可以去自定義請求頁碼的名稱了，改值的時候注意寫pageName和limitName，這樣才是代表page和limit。

像有時候我們也會碰到像條件搜索，那么我們如何解決這個問題呢？
在這里插入圖片描述
官網給我們說的很清楚，只需要添加一個where即可，然后我們點擊觸發一定的表格重繪事件時，我們就可以根據這個where去發請求了。
那么我在這里添加了一個表格搜索框
在這里插入圖片描述
使用toolbar去指定script/html模板
在這里插入圖片描述
就會呈現這樣一種效果
在這里插入圖片描述
接下來我們就可以根據id也好class也好去獲取他的val值，將他放置到我們的where請求對象中，這樣就可以實現自定義請求參數。
在這里插入圖片描述
其實像下面的table.reload這個也就是表格重繪了，因為我們發送了請求，那么我們就可以根據我們的條件去重新渲染表格了，

再有像其他的請求toke？請求方法，大家就可以參照文檔了。


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Layui：數據表格表頭參數 layui數據表格中展示圖片 layui數據表格及分頁 Layui：數據表格的重載 layui中的數據表格顯示的是msg字段，而不是data字段 layui數據表格中圖片無法自適應問題 關於layui中數據表格的使用心得 layui 數據表格自適應高度 layui數據表格左固定問題 layui動態數據表格-分頁
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM