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