Layui表格实现查看、编辑、删除功能 - 弹窗示例

<table class="layui-hide" id="projectList"></table>
<script type="text/html" id="barDemo">
<a class="layui-btn 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>
<p>使用Layui表格模块的事件监听函数，可以实现点击查看、编辑、删除按钮后弹出相应的弹窗。</p>
<p>首先，需要在页面中引入layui的相关文件：</p>
<pre><code class="language-html">&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css&quot;&gt;
&lt;script src=&quot;https://cdn.staticfile.org/layui/2.5.6/layui.min.js&quot;&gt;&lt;/script&gt;
</code></pre>
<p>然后，使用以下代码来实现弹窗的功能：</p>
<pre><code class="language-javascript">&lt;script&gt;
layui.use('table', function(){
var table = layui.table;

// 渲染表格
table.render({
elem: '#projectList',
url: '数据接口的URL',
cols: [[
{field:'name', title:'项目名称'},
{field:'status', title:'状态'},
{field:'operate', title:'操作', toolbar:'#barDemo'}
]],
page: true
});

// 监听表格工具栏点击事件
table.on('tool(projectList)', function(obj){
var data = obj.data; // 获取当前行的数据
var layEvent = obj.event; // 获取当前点击的事件类型

if(layEvent === 'detail'){ // 查看按钮点击事件
layer.open({
title: '查看',
content: '查看弹窗的HTML代码',
area: ['500px', '300px']
});
} else if(layEvent === 'edit'){ // 编辑按钮点击事件
layer.open({
title: '编辑',
content: '编辑弹窗的HTML代码',
area: ['500px', '300px'],
btn: ['保存', '取消'],
yes: function(index, layero){
// 点击保存按钮的回调函数
// 在这里可以获取编辑弹窗中的表单数据并进行保存操作
layer.close(index); // 关闭弹窗
}
});
} else if(layEvent === 'del'){ // 删除按钮点击事件
layer.confirm('确认删除吗？', function(index){
// 在这里可以发送删除请求，并根据返回的结果进行相应的操作
layer.close(index); // 关闭弹窗
});
}
});
});
&lt;/script&gt;
</code></pre>
<p>在上述代码中，需要将数据接口的URL替换为实际的接口地址。同时，还需要自定义查看和编辑弹窗的HTML代码，并在相应的位置进行替换。</p>
<p>最后，将以上代码放置在页面中，确保table表格的id为&quot;projectList&quot;，工具栏的模板id为&quot;barDemo&quot;，即可实现点击查看、编辑、删除按钮后弹出相应的弹窗。</p>