當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

layui中的动态表格

發布時間：2023/12/29 编程问答 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 layui中的动态表格小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

layui中的動態表格

介紹

layui提供了豐富的動態表格的操作,它用于對表格進行一些列功能和動態化數據操作，涵蓋了日常業務所涉及的幾乎全部需求。支持固定表頭、固定行、固定列左/列右，支持拖拽改變列寬度，支持排序，支持多級表頭，支持單元格的自定義模板，支持對表格重載（比如搜索、條件篩選等），支持復選框，支持分頁，支持單元格編輯等等一些列功能. 但是也存在這一些細節性的問題, 那么下面我就帶大家來使用下它的動態表格吧.

使用

下載layui插件

大家可以自己在layui 的官網上面下載layui 的插件,網址: https://www.layui.com

如何在自己的html引入layui的插件

跟一些前端框架比較類似, 不過layui是劃分模塊的, 所以它的引入方式也分為兩種, 這里,就只介紹一種, 如果感興趣,可以在官方api上面查看更詳細的資料;

<link rel="stylesheet" href="layui/css/layui.css" media="all">  <script src="layui/layui.js"></script>

制作自己的動態表格

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>table模塊快速使用</title><link rel="stylesheet" href="layui/css/layui.css" media="all"><style>th {text-align: center !important;font-weight: 600 !important;}td {text-align: center !important;}.layui-table-page {text-align: center;}.layui-form .layui-form-item {margin-top: 10px;}.layui-form .layui-form-item input {width: 360px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}/*.layui-box.layui-laypage.layui-laypage-default{margin : 0 50%;}*/</style> </head> <body> <x></x> <form class="layui-form update-form" action="#" lay-filter="myForm" style="display: none"><div class="layui-form-item"><label class="layui-form-label">文章標題</label><div class="layui-input-block"><input type="text" class="layui-input" name="title" autocomplete="off"/></div></div><div class="layui-form-item"><label class="layui-form-label">發布時間</label><div class="layui-input-block"><input type="text" class="layui-input" name="ctime" autocomplete="off"/></div></div><div class="layui-form-item"><label class="layui-form-label">來源</label><div class="layui-input-block"><input type="text" class="layui-input" name="source" autocomplete="off"/></div></div> </form><div class="layui-row"><div class="layui-col-md10 layui-col-md-offset1"><table id="tab" lay-filter="tabFilter"></table></div> </div> <script type="text/html" id="titleTpl"><a href="{{d.url}}" class="layui-table-link">{{d.title}}</a> </script><script type="text/html" id="titleTpl2"><input type="checkbox"/> {{d.ctime}} </script> <script type="text/html" id="headerBar"><div class="layui-btn-group"><button class="layui-btn layui-btn-xs" lay-event="add"><i class="layui-icon layui-icon-addition"></i>添加</button><button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="deleteAll"><iclass="layui-icon layui-icon-delete"></i>刪除選中</button><button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="refresh"><iclass="layui-icon layui-icon-refresh"></i>刷新</button></div> </script> <script type="text/html" id="rowBar"><button class="layui-btn layui-btn-xs" lay-event="edit">編輯</button><button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">刪除</button><button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="desc">詳情</button> </script><script src="js/jquery-1.11.3.js"></script> <script src="layui/layui.js"></script> <script>layui.use(['table', 'laypage', 'layer'], function () {let laypage = layui.laypage;let table = layui.table;let layer = layui.layer;let delItems = [];let ins = table.render({elem: '#tab', width: "100%"/*, url: 'json/demo1.json' //數據接口*/, url: "http://api.tianapi.com/txapi/wxhotarticle/index", where: {key: "46884f2982e1d2ba85270fd5db52552e"}, request: {limitName: "num"}, page: {/* layout: ['prev', 'page', 'next']*/} //開啟分頁/*自定義參數名稱*/, limit: 10, limits: [5, 10, 20, 30]/*自定義參數的樣式*/, parseData: function (resp) {/* console.log(resp.msg);*/return {"code": 0,"msg": resp.msg,"count": 500,"data": resp.newslist}}, cols: [[ //表頭{type: 'checkbox', width: 50}, {field: 'ctime', title: '創建時間', width: 160, sort: true}/*綁定模板選擇器, 三種方法*/, {field: 'title', title: '文章標題', width: 341, templet: '#titleTpl'}, {field: 'views', title: '閱讀記錄', width: 200}, {field: 'source', title: '來源', width: 180}/* , {field: 'url', title: "鏈接", width: 250}*/, {title: "操作", fixed: 'right', align: "center", width: 200, toolbar: '#rowBar'}]], toolbar: '#headerBar', done: function (res, curr, count) {//如果是異步請求數據方式，res即為你接口返回的信息。//如果是直接賦值的方式，res即為：{data: [], count: 99} data為當前頁數據、count為數據總長度}/*可以自己展默認的Toolbar*/, defaultToolbar: ['filter', 'print', 'exports', {title: '提示' //標題, layEvent: 'LAYTABLE_TIPS' //事件名，用于 toolbar 事件中使用, icon: 'layui-icon-tips' //圖標類名}], initSort: {field: 'ctime' //排序字段，對應 cols 設定的各字段名, type: "desc" //排序方式 asc: 升序、desc: 降序、null: 默認排序},even: true});table.on('tool(tabFilter)', function (obj) {console.log(obj);let data = obj.data;let layEvent = obj.event;let tr = obj.tr;if (layEvent == 'edit') {layer.open({type: 1,title: '用戶修改',content: $(".update-form"),area: ['500px', '300px'],btn: ['確定', '取消'],anim: 1,btnAlign: "c",yes: function (index, formObj) {layer.close(index);layer.msg("修改成功!", {icon: 1, time: 1000});obj.update({title: $("form input:eq(0)").val(),ctime: $("form input:eq(1)").val()});}})$("form input:eq(1)").val(data.ctime);$("form input:eq(0)").val(data.title).focus();//同步更新緩存對應的值/* obj.update({title: 'xxx'});*/} else if (layEvent == 'delete') {layer.confirm('真的想刪除么?', {icon: 2, title: '提示'}, function (index) {//向服務端發送刪除指令obj.del(); //刪除對應行（tr）的DOM結構，并更新緩存layer.close(index);layer.msg("刪除成功!", {icon: 1, time: 1500});});} else if (layEvent == 'desc') {layer.msg(JSON.stringify(data));}})/*監聽表頭的工具欄*/table.on('toolbar(tabFilter)', function (obj) {let event = obj.event;let checkStatus = table.checkStatus(obj.config.id);if (event == 'add') {layer.open({type: 1,title: '用戶添加',content: $(".update-form"),area: ['500px', '300px'],btn: ['確定', '取消'],anim: 1,btnAlign: "c",yes: function (index, formObj) {layer.close(index);layer.msg("添加成功!", {icon: 1, time: 1500});}})$("form input:eq(0)").focus();} else if (event == 'deleteAll') {let data = checkStatus.data;if (data.length != 0) {layer.confirm('真的想刪除么', {icon: 2, title: '提示'}, function (index) {if (checkStatus.isAll) {$("table tbody tr").remove();} else {$('table tbody tr').each(function (i, e) {if ($(e).find(":checkbox").prop("checked")) {e.remove();}})}layer.close(index);layer.msg("刪除成功!", {icon: 1, time: 1500});})} else {layer.msg("請選擇你需要刪除的行", {icon: 2, time: 1500});}} else if (event == 'refresh') {ins.reload();} }</script> </body> </html>

注意的問題

由于我只自己申請網上免費的api使用, 所以得到的響應數據格式更layui所需要的數據格式存在差異, 這個時候就需要對自己的數據進行解析, 這個時候就用到了parseData這個參數, 還有就是layui 默認的請求參數也是不一樣的, 它的分頁的大小,默認是limit, 請求的分頁頁碼是默認是page,這個時候就可以通過request參數進行重新的修改;另外, 也可以通過response修改響應參數的名稱;

效果

總結

以上是生活随笔為你收集整理的layui中的动态表格的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： AWS架构图 - 包含2019个新图标和
下一篇：计算机图形学学习笔记 OpenGL图形