@{ 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>