Layui資料表格展開摺疊
阿新 • • 發佈：2020-07-18
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link href="../Scripts/layui/css/layui.css" rel="stylesheet" /> <!-- 注意：如果你直接複製所有程式碼到本地，上述css路徑需要改成你本地的 --> </head> <body> <table class="layui-table" id="tableOut" lay-filter="tableOut"></table> <script src="../Scripts/layui/layui.all.js"></script> <!-- 注意：如果你直接複製所有程式碼到本地，上述js路徑需要改成你本地的 --> <script> layui.use(['jquery', 'laydate', 'util', 'layer', 'table', 'form'], function ($, laydate, util, layer, table, form) { var tableIns = table.render({ elem: '#tableOut', data: [ { id:1, name: '小米', age: '16', friend: [{ id: 2, name: '大米', age: '28' }, { id: 5, name: '小虎', age: '16' }] }, { id: 2, name: '大米', age: '28', friend: [{ id: 1, name: '小米', age: '28' }] }, { id: 3, name: '小花', age: 0 }, { id: 4, name: '小甲', age: '28' }, { id: 5, name: '小虎', age: '16' }, { id: 6, name: '小賢', age: '28' }], page: {}, cols: [[ { field: 'btn', width: 50, align: 'center', templet: function (d) { return '<a style="width: 100%; height: 100%;cursor: pointer;" lay-event="addRowTable">+</a>' } }, { field: 'id', title: 'ID', sort: true }, { field: 'name', title: '名稱', edit: true }, { field: 'age', title: '年齡', sort: true } ]], }); // 假釋真的需要預設點選搜尋在下面table render過之後再呼叫$dom.click()即可 //監聽工具條 table.on('tool(tableOut)', function (obj) { //注：tool是工具條事件名，test是table原始容器的屬性 lay-filter="對應的值" var data = obj.data; //獲得當前行資料 var layEvent = obj.event; //獲得 lay-event 對應的值（也可以是表頭的 event 引數對應的值） // 異常不要用它原來的這個作為tr的dom // var tr = obj.tr; //獲得當前行 tr 的DOM物件 var $this = $(this); var tr = $this.parents('tr'); var trIndex = tr.data('index'); if (layEvent === 'addRowTable') { // 外圍的table的id + tableIn_ + 當前的tr的data-index $(this).attr('lay-event', 'fold').html('-'); var tableId = 'tableOut_tableIn_' + trIndex; var _html = [ '<tr class="table-item">', '<td colspan="' + tr.find('td').length + '" style="padding: 6px 12px;">', '<table id="' + tableId + '"></table>',//可以巢狀表格也可以是其他內容，如是其他內容則無須渲染該表格 '</td>', '</tr>' ]; tr.after(_html.join('\n')); // 渲染table table.render({ elem: '#' + tableId, data: data.friend || [], cols: [[ { field: 'id', title: 'ID' }, { field: 'name', title: '朋友姓名' }, { field: 'age', title: '年齡' } ]], }); // $(window).resize(); } else if (layEvent === 'fold') { $(this).attr('lay-event', 'addRowTable').html('+'); tr.next().remove(); } }); }); </script> </body> </html>
效果如下