可以使用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);
});

以上代码仅为示例,具体的查看、编辑和删除操作需要根据实际需求进行编写

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

原文地址: https://www.cveoy.top/t/topic/iVbl 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录