table class=layui-hide id=projectListtable script type=texthtml 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
可以使用JavaScript和layui库来实现对table表进行修改。首先,需要在页面中引入layui库和相关样式:
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
接下来,使用以下代码初始化table,并添加相关操作按钮:
<script>
layui.use('table', function(){
var table = layui.table;
// 渲染table
table.render({
elem: '#projectList',
url: '/api/project/list', // 数据接口
cols: [[
{field: 'id', title: 'ID'},
{field: 'name', title: '名称'},
{field: 'operation', title: '操作', toolbar: '#barDemo'}
]]
});
// 监听工具条按钮点击事件
table.on('tool(projectList)', function(obj){
var data = obj.data; // 获取当前行数据
var layEvent = obj.event; // 获取lay-event属性值
if(layEvent === 'detail'){ // 查看
// TODO: 编写查看操作的代码
} else if(layEvent === 'edit'){ // 编辑
// TODO: 编写编辑操作的代码
} else if(layEvent === 'del'){ // 删除
// TODO: 编写删除操作的代码
}
});
});
</script>
在上述代码中,#projectList为table的id,/api/project/list为数据接口地址,#barDemo为操作按钮的模板。可以根据具体需求修改这些值。
接下来,根据需求编写查看、编辑和删除操作的代码。例如,可以通过弹窗或跳转页面来实现查看和编辑功能,通过发送Ajax请求来实现删除功能。
// 查看操作的代码
layer.open({
title: '查看',
content: '查看操作的内容',
area: ['500px', '300px']
});
// 编辑操作的代码
layer.open({
title: '编辑',
content: '编辑操作的内容',
area: ['500px', '300px']
});
// 删除操作的代码
layer.confirm('确定删除该项目?', function(index){
// TODO: 发送Ajax请求删除数据
// 删除成功后重新加载表格数据
table.reload('projectList');
layer.close(index);
});
以上代码仅为示例,具体的查看、编辑和删除操作需要根据实际需求进行编写
原文地址: https://www.cveoy.top/t/topic/iVbl 著作权归作者所有。请勿转载和采集!