标签：idt ring form 快速 char name 20px layui false
代码结构lib放入layui即可
xxx换成user即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>xxx</title>
<link rel="stylesheet" href="/lib/layui/css/layui.css">
</head>
<body>
<script type="text/html" id="table-bar">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="add-xxx">添加</button>
</div>
</script>
<table class="layui-hide" id="xxx" lay-filter="xxx" lay-data="{id: ‘xxx‘}"></table>
<script type="text/html" id="row-bar">
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del-xxx">删除</a>
</script>
<script src="/lib/layui/layui.js"></script>
<script>
layui.use([‘table‘, ‘layer‘, ‘form‘], async () => {
const table = layui.table;
const layer = layui.layer;
const form = layui.form
async function refresh() {
return await new Promise((y, n) => {
layui.$.ajax({
url: "/api/xxx", type: "GET",
success: (rsp) => {
y(rsp)
}
})
});
}
table.render({
elem: ‘#xxx‘,
id: ‘xxx‘,
toolbar: "#table-bar",
cols: [[
// {field: ‘uid‘, title: ‘ID‘, sort: true},
{fixed: ‘right‘, width: 150, align: ‘center‘, toolbar: ‘#row-bar‘}
]],
data: await refresh(),
page: {
limits: [2, 10, 100]
}
});
table.on(‘edit(xxx)‘, async (obj) => {
const value = obj.value, data = obj.data, field = obj.field;
const rsp = await new Promise((y, n) => {
console.log(JSON.stringify(data))
layui.$.ajax({
url: "/api/xxx",
type: "POST",
contentType: "application/json",
data: JSON.stringify(data),
success: (rsp) => {
console.log(1)
y(rsp)
},
error: (xhr) => {
n(xhr)
}
})
}).catch(async (e) => {
table.reload(‘xxx‘, {
data: await refresh(),
});
layer.msg(‘服务器开小差了‘);
});
});
table.on(‘tool(xxx)‘, function (obj) {
const layEvent = obj.event, data = obj.data, tr = obj.tr;
switch (layEvent) {
case "del-xxx":
layer.confirm(‘真的删除行么‘, async (index) => {
const rsp = await new Promise((y, n) => {
layui.$.ajax({
url: `/api/xxx/${data.uid}`,
type: "DELETE",
success: (rsp) => {
y(rsp)
},
})
})
if (rsp === "ok")
table.reload(‘xxx‘, {
data: await refresh(),
});
layer.close(index)a;
});
break
default:
}
});
table.on(‘toolbar(xxx)‘, function (obj) {
switch (obj.event) {
case ‘add-xxx‘:
layer.open({
type: 1,
area: [‘600px‘, ‘360px‘],
shadeClose: true, //点击遮罩关闭
content: layui.$("#add-xxx-container")
});
break;
default:
}
});
form.on(‘submit(xxx-add-act)‘, async (data) => {
const rsp = await new Promise((y, n) => {
console.log(JSON.stringify(data.field))
layui.$.ajax({
url: "/api/xxx",
type: "POST",
contentType: "application/json",
data: JSON.stringify(data.field),
success: (rsp) => {
y(rsp)
},
error: (xhr) => {
n(xhr)
}
})
}).catch(async (e) => {
layer.msg(‘服务器开小差了‘);
});
layer.close(layer.index)
table.reload(‘xxx‘, {
data: await refresh(),
});
return false;
});
});
</script>
</body>
<div id="add-xxx-container" style="padding:20px; display: none">
<form class="layui-form">
<label>
<!-- ID <input type="text" disabled name="uid" placeholder="" autocomplete="off"-->
<!-- class="layui-input">-->
</label>
<button type="button" class="layui-btn" lay-submit lay-filter="xxx-add-act">add</button>
</form>
</div>
</html>
标签：idt ring form 快速 char name 20px layui false
原文地址：https://www.cnblogs.com/zeerbeer/p/14620622.html
