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