layui数据表格 删除行的实现

在 layui 数据表格中，删除行的实现可以通过以下步骤完成：

1. 首先需要给数据表格添加一个监听事件，监听删除操作：

table.on('tool(test)', function(obj){
  var data = obj.data;
  if(obj.event === 'del'){
    layer.confirm('真的删除行么', function(index){
      obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
      layer.close(index);
      //向服务端发送删除指令
    });
  } else if(obj.event === 'edit'){
    //编辑操作
  }
});

2. 在监听事件中，当点击删除按钮时，弹出确认框询问是否真的要删除该行数据，如果确认删除，则调用 obj.del() 方法删除对应行的 DOM 结构，并更新缓存。

3. 如果需要向服务端发送删除指令，可以在确认删除后，通过 ajax 请求向服务端发送删除请求。

完整代码示例：

<table class="layui-table" lay-data="{id:'test'}" lay-filter="test">
  <thead>
    <tr>
      <th lay-data="{field:'id', width:80}">ID</th>
      <th lay-data="{field:'username', width:120}">用户名</th>
      <th lay-data="{field:'email', width:150}">邮箱</th>
      <th lay-data="{field:'sex', width:80, sort:true}">性别</th>
      <th lay-data="{field:'city', width:100}">城市</th>
      <th lay-data="{field:'sign', width:200}">签名</th>
      <th lay-data="{field:'experience', width:100, sort:true}">积分</th>
      <th lay-data="{field:'score', width:100, sort:true}">评分</th>
      <th lay-data="{field:'classify', width:100}">职业</th>
      <th lay-data="{field:'wealth', width:150, sort:true}">财富</th>
      <th lay-data="{fixed: 'right', width:165, align:'center', toolbar: '#barDemo'}"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>test@test.com</td>
      <td>男</td>
      <td>北京</td>
      <td>这是一段签名</td>
      <td>1000</td>
      <td>99</td>
      <td>工程师</td>
      <td>100000</td>
      <td><button class="layui-btn layui-btn-xs" lay-event="edit">编辑</button><button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button></td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>test@test.com</td>
      <td>女</td>
      <td>上海</td>
      <td>这是一段签名</td>
      <td>2000</td>
      <td>98</td>
      <td>设计师</td>
      <td>50000</td>
      <td><button class="layui-btn layui-btn-xs" lay-event="edit">编辑</button><button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button></td>
    </tr>
  </tbody>
</table>

<script type="text/html" id="barDemo">
  <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>
layui.use('table', function(){
  var table = layui.table;
  
  //监听工具条
  table.on('tool(test)', function(obj){
    var data = obj.data;
    if(obj.event === 'del'){
      layer.confirm('真的删除行么', function(index){
        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
        layer.close(index);
        //向服务端发送删除指令
      });
    } else if(obj.event === 'edit'){
      //编辑操作
    }
  });
});
</script>