溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關layui 中table組件如何使用，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
table是 layui 最核心的組成之一。它用于對表格進行一些列功能和動態化數據操作，涵蓋了日常業務所涉及的幾乎全部需求。支持固定表頭、固定行、固定列左/列右，支持拖拽改變列寬度，支持排序，支持多級表頭，支持單元格的自定義模板，支持對表格重載（比如搜索、條件篩選等），支持復選框，支持分頁，支持單元格編輯等等一些列功能。
下邊整理了一個例子：
<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>layer學習</title> <link href="/Content/mycss.css" rel="stylesheet" /> <link href="/Content/layui/css/layui.css" rel="stylesheet" /> <script src="/Content/layui/layui.js"></script></head><body> <!--表格--> <div id="myTable" lay-filter="test"></div> <!--工具欄--> <script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-xs" lay-event="edit">編輯</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a> </script> <script type="text/html" id="allow"> <!-- 這里的 checked 的狀態只是演示 --> <input type="checkbox" name="{{d.Id}}" value="{{d.Id}}" title="允許" lay-filter="allowSetFilter" {{ d.IsAllow == true ? 'checked' : '' }}> </script> <script> layui.use(['table','form'], function () { var table = layui.table; form = layui.form; //*******************************渲染表格********************************** table.render({ //------------------------核心參數 elem: '#myTable' //渲染的dom元素 , url: '/Home/GetUserList' //異步請求接口 , page: true //開啟分頁 , id: 'elementID' //容器唯一ID , cols: [[ //列設置 { field: 'Id', title: '編號', sort: true, fixed: 'left' } , { field: 'Name', title: '姓名' } , { field: 'Age', title: '年齡' } , { field: 'Role', title: '角色' } , { field: 'CreateTime', title: '創建時間' } , { title: '自定義模板', width: 200 , templet: function (d) { return '姓名：<span style="color: #c00;">' + d.Name + '</span>' } } , { field: 'IsAllow', title: '是否使用', templet: '#allow', unresize: true, align: 'center' } , { fixed: 'right', width: 150, align: 'center', toolbar: '#barDemo' } ]] //-----------------------------異步請求設置 , method: 'post' //異步請求方式 , headers: { hello: 'hengheng' } //在request的header中添加數據 , request: { //request設置，默認值如下 pageName: 'page', limitName: 'limit' } , response: { //response設置，默認值如下 statusName: 'code' , countName: 'count' , dataName: 'data' , msgName: 'msg' } , where: { //向后臺添加的額外參數 nameParm: 'u', roleParm: 'o' } //-----------------------加載的其他選項 , done: function (res, curr, count) { //res為接口返回的數據、count為數據總長度 console.log(res); console.log(curr); console.log(count); } , text: { none: '暫無相關數據' //默認：無數據。 } , initSort: { field: 'Id' //排序字段為Id , type: 'desc' //排序方式 asc: 升序、desc: 降序、null: 默認排序 } }) //*******************************監聽表格********************************** table.on('tool(test)', function (obj) { //test為lay-filter值 var data = obj.data; //獲得當前行數據 var layEvent = obj.event; //獲得 lay-event var tr = obj.tr; //獲得當前行 tr 的DOM對象 if (layEvent === 'edit') { var id = data.Id; layer.open({ type: 2 , title: '修改' //標題欄 , scrollbar: false , area: ['400px', '300px'] , shade: 0.5 , id: 'layerId' //設定一個id，防止重復彈出 , moveType: 1 //拖拽模式，0或者1 , content: '/Home/EditUserInfo?id=' + id }); } else if (layEvent === 'del') { layer.confirm('真的刪除嗎？', function (index) { obj.del(); //刪除對應行（tr）的DOM結構 layer.close(index); var id = data.Id; //向服務端發送刪除指令 $.post("/Home/DeleteUserInfo", { "id": id }, function (result) { if (result.IsSuccess === 1) { layer.msg(result.Msg); table.reload('elementID'); } else { layer.msg(result.Msg); table.reload('elementID'); } }) }); } }); //*******************************監聽checkbox******************************** //監聽操作----置頂 form.on('checkbox(allowSetFilter)', function (obj) { var pre = { "Id": this.name, "IsAllow": obj.elem.checked }; //alert(this.name+'----'+obj.elem.checked); $.post('/Home/SetAllow', pre, function (result) { if (result.IsSuccess === 1) { layer.msg(result.msg) } else { layer.msg(result.msg) } }) }); }); </script></body></html>看完上述內容，你們對layui 中table組件如何使用有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
