一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。
数据表格在开发中很常见，以下展示了数据列表及数据的编辑
一、代码
<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 rel="stylesheet" href="../layui/css/layui.css" media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div style="padding: 20px;">
<div style="overflow: hidden;">
<div style="float: left;">
<button type="button" class="layui-btn layui-btn-normal" onclick="tianjia()">添加</button>
<button type="button" class="layui-btn layui-btn-danger" onclick="plsc()">批量删除</button>
</div>
<div class="" style="float: right;">
<label class="layui-form-label">船型名称:</label>
<div class="layui-input-inline">
<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入船型名称"
class="layui-input">
</div>
<button type="button" class="layui-btn">查询</button>
</div>
</div>
<table class="layui-table" lay-data="" lay-filter="demo">
<thead>
<tr>
<th lay-data="{type:'checkbox', fixed: 'left'}"></th>
<th lay-data="{field:'xh',}">序号</th>
<th lay-data="{field:'cxmc',}">船型名称</th>
<th lay-data="{field:'cxbh',}">船型编号</th>
<th lay-data="{field:'cxxh',}">船型型号</th>
<th lay-data="{field:'chsj',}">出海时间</th>
<th lay-data="{fixed: 'right', width:178, align:'center', toolbar: '#barDemo'}">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>1</td>
<td>渔船61005</td>
<td>9635-301</td>
<td>004</td>
<td>2022-03-26 08:32:07</td>
</tr>
<tr>
<td></td>
<td>2</td>
<td>渔船61006</td>
<td>9635-564</td>
<td>001</td>
<td>2021-12-19 08:45:06</td>
</tr>
<tr>
<td></td>
<td>3</td>
<td>渔船61007</td>
<td>9635-854</td>
<td>002</td>
<td>2021-06-27 08:31:08</td>
</tr>
<tr>
<td></td>
<td>4</td>
<td>渔船61008</td>
<td>9635-985</td>
<td>005</td>
<td>2021-05-25 08:06:12</td>
</tr>
<tr>
<td></td>
<td>5</td>
<td>渔船61009</td>
<td>9635-152</td>
<td>006</td>
<td>2021-04-21 09:25:36</td>
</tr>
<tr>
<td></td>
<td>6</td>
<td>渔船61012</td>
<td>9635-161</td>
<td>007</td>
<td>2021-04-21 09:13:26</td>
</tr>
</tbody>
</table>
</div>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="../layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
function tianjia() {
layer.open({
type: 1,
title: '添加',
btn: ['确定', '关闭'],
content: "<div style='width:1000px;height:600px;padding:20px;line-height:35px;'><ul><li style='display:flex;margin-bottom:10px;'><div style='width:160px;text-align: right;margin-right:20px;color: #686B6D;'>船型名称：</div><input type='text' style='width:500px;padding-left:10px;border-radius: 5px;border: 1px solid #E5E6E7;'></li><li style='display:flex;margin-bottom:10px;'><div style='width:160px;text-align: right;margin-right:20px;color: #686B6D;'>船型编号：</div><input type='text' style='width:500px;padding-left:10px;border-radius: 5px;border: 1px solid #E5E6E7;'></li><li style='display:flex;margin-bottom:10px;'><div style='width:160px;text-align: right;margin-right:20px;color: #686B6D;'>船型型号：</div><input type='text' style='width:500px;padding-left:10px;border-radius: 5px;border: 1px solid #E5E6E7;'></li><li style='display:flex;margin-bottom:10px;'><div style='width:160px;text-align: right;margin-right:20px;color: #686B6D;'>出海时间：</div><input type='text' style='width:500px;padding-left:10px;border-radius: 5px;border: 1px solid #E5E6E7;'></li></ul></div>"
});
}
function plsc() {
layer.confirm('确定删除么', function(index) {
layer.close(index);
});
}
</script>
<script>
layui.use('table', function() {
var table = layui.table;
//监听工具条
table.on('tool(demo)', function(obj) {
var data = obj.data;
if (obj.event === 'detail') {
layer.open({
type: 1,
title: '查看',
btn: ['关闭'],
content: "<div style='width:1000px;height:600px;padding:20px;line-height:35px;'><ul><li style='display:flex;'><div style='width:160px;text-align: right;margin-right:20px;color: #686B6D;'>序号：</div>" +
data.xh +
"</li><li style='display:flex;'><div style='width:160px;text-align: right;margin-right:20px;color: #686B6D;'>船型名称：</div>" +
data.cxmc +
"</li><li style='display:flex;'><div style='width:160px;text-align: right;margin-right:20px;color: #686B6D;'>船型编号：</div>" +
data.cxbh +
"</li><li style='display:flex;'><div style='width:160px;text-align: right;margin-right:20px;color: #686B6D;'>船型型号：</div>" +
data.cxxh +
"</li><li style='display:flex;'><div style='width:160px;text-align: right;margin-right:20px;color: #686B6D;'>出海时间：</div>" +
data.chsj +
"</li></ul></div>"
});
} else if (obj.event === 'del') {
layer.confirm('真的删除行么', function(index) {
obj.del();
layer.close(index);
});
} else if (obj.event === 'edit') {
layer.open({
type: 1,
title: '编辑',
btn: ['确定', '关闭'],
content: "<div style='width:1000px;height:600px;padding:20px;line-height:35px;'><ul><li style='display:flex;margin-bottom:10px;'><div style='width:160px;text-align: right;margin-right:20px;color: #686B6D;'>序号：</div>" +
data.xh +
"</li><li style='display:flex;margin-bottom:10px;'><div style='width:160px;text-align: right;margin-right:20px;color: #686B6D;'>船型名称：</div><input type='text' placeholder='" +
data.cxmc +
"' style='width:500px;padding-left:10px;border-radius: 5px;border: 1px solid #E5E6E7;'></li><li style='display:flex;margin-bottom:10px;'><div style='width:160px;text-align: right;margin-right:20px;color: #686B6D;'>船型编号：</div><input type='text' placeholder=" +
data.cxbh +
" style='width:500px;padding-left:10px;border-radius: 5px;border: 1px solid #E5E6E7;'></li><li style='display:flex;margin-bottom:10px;'><div style='width:160px;text-align: right;margin-right:20px;color: #686B6D;'>船型型号：</div><input type='text' placeholder=" +
data.cxxh +
" style='width:500px;padding-left:10px;border-radius: 5px;border: 1px solid #E5E6E7;'></li><li style='display:flex;margin-bottom:10px;'><div style='width:160px;text-align: right;margin-right:20px;color: #686B6D;'>出海时间：</div><input type='text' placeholder='" +
data.chsj +
"' style='width:500px;padding-left:10px;border-radius: 5px;border: 1px solid #E5E6E7;'></li></ul></div>"
});
}
});
});
</script>
</body>
</html>
需要注意的是：时间格式拼接的时候要用'"+time+"' 如果用"+time+" 取到的是2022-03-26而不是2022-03-26 08:32:07
二、效果
一起加油！！！
