@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>List</title> <link rel="stylesheet" href="~/layuiadmin/layui/css/layui.css" media="all"> <link rel="stylesheet" href="~/layuiadmin/style/admin.css" media="all"> <script src="~/Scripts/jquery-3.3.1.js"></script> <script src="~/layuiadmin/layui/layui.js"></script> <script src="~/Scripts/UrlHelper.js"></script> <script src="~/Scripts/Common.js"></script> <link href="~/Content/lay-list.css" rel="stylesheet" /> <script src="~/Scripts/linq.js"></script> </head> <body> <script type="text/html" id="table-tool-bar"> <div class="layui-inline" lay-event="add"><i class="layui-icon layui-icon-add-1"></i></div> <div class="layui-inline" lay-event="delete"><i class="layui-icon layui-icon-delete"></i></div> </script> <script type="text/javascript"> var obj = [{ ProductID: 1, ProductName: "水杯", }, ]; var LogList = new Array(); function initData() { if (LogList.length > 0) { $(JSON.parse(logId)).each(function (i, e) { var obj = LogList.find(function (i) { return i.LogId == e.LogId; }) if (obj === undefined) { LogList.push(e); } }) } else { LogList = JSON.parse(logId); } layui.use('table', function () { var table = layui.table; table.reload('demo', { data:LogList }); }); } layui.use(['layer', 'table'], function () { var layer = layui.layer; var table = layui.table; //第一個實例 table.render({ elem: '#demo' , url: "@Url.Action("Index")" //, data: LogList , page: false //開啟分頁 , limit:100 , text: { none: '暫無相關數據' //默認：無數據。注：該屬性為 layui 2.2.5 開始新增 } , toolbar: '#table-tool-bar' , cols: [[ //表頭 { field: 'LogId', type: "checkbox", title: '日志ID', sort: true, fixed: 'left' } , { field: 'LogId', title: '日志ID', } , { field: 'UserName', title: '用戶名', } , { field: 'Description', title: '操作說明', sort: true } , { field: 'Brower', title: '瀏覽器' } , { field: 'OS', title: '操作系統', edit: "text" } , { field: 'IP', title: 'IP', sort: true } , { field: 'AddTime', title: '操作時間', sort: true } ]] }); var array = []; table.on('checkbox(test)', function (obj) { var tr = obj.tr; //得到當前點擊復選框的行元素對象 if (obj.type == 'all') { //點擊全選按鈕觸發此處 var len = array.length; array.splice(0, len); //全選后刪除數組項，重新添加全選的dom元素 var i = 0; $(obj.tr.prevObject[0].firstChild.rows).each(function (i, e) { var subarr = [$(e), $(obj.tr.prevObject[1].firstChild.rows[i])]; array.push(subarr); i++; }) } else { if (obj.checked) { //多選框被選中則添加dom元素到數組 array.push(tr); } else {//取消多選框的選中則在數組中刪除自己 var indexs = obj.tr[0].rowIndex; //獲取取消選中的元素對象下標 array.forEach((item, index) => { //當數組中任意一個元素的rowIndex值與取消復選框的元素對象屬性rowIndex的下標值相等，則在數組中刪除該元素 if (item[0].rowIndex === undefined) { if (item[0][0].rowIndex == indexs) { array.splice(index, 1); } } else { if (item[0].rowIndex == indexs) { array.splice(index, 1); } } }) } } }); table.on('toolbar(test)', function (obj) { var checkStatus = table.checkStatus(obj.config.id); switch (obj.event) { case 'add': layer.open({ type: 2, title: "選擇商品", area: ['900px', '420px'], shade: 0.8, shadeClose: true, maxmin: true, content: '@Url.Action("Index")' }); break; case 'delete': layer.msg('刪除'); array.forEach((item) => { console.log(item); item[0].remove(); //刪除dom結構 item[1].remove(); }) break; }; }); $("button").click(function () { console.log(layui.table.cache["demo"]); }) }); </script> <table id="demo" lay-filter="test"></table> <button type="button">test</button> </body> </html>