layui表格数据变更的一种处理方式

前言

作为前端开发者，表格作为数据展示的重要形式之一，在开发中都要反复用到。在使用table组件时，我们有时会遇到需要对表格数据进行增、删、改、查等操作，而这些操作会影响前端页面展示的表格内容，因此需要及时处理。

什么是layui？

Layui是一款基于jQuery的前端UI框架，它能够帮助我们快速搭建Web界面并提供丰富的界面UI组件。

Layui table是Layui中的一个组件，它是基于jQuery封装的表格组件。它提供了表格的基本功能，如排序、异步加载数据、分页等等。此外，Layui table 还支持单元格编辑、勾选行选中、行内操作按钮等高级功能。

layui表格数据变更的一种处理方式

1.监听表格编辑事件

在Layui table中，我们可以通过 table.on('edit(tableName)', functon(obj){}) 来监听表格编辑事件。当单元格的值被修改后，这个事件就会触发。

下面是监听表格编辑事件的代码：

table.on('edit(tableName)', function(obj){
  // obj.field：当前编辑的字段名
  // obj.value：当前编辑的数据
  // obj.data：所在行的所有相关数据  
  console.log(obj.field); //当前编辑的字段名
  console.log(obj.value); //当前编辑的数据
  console.log(obj.data); //所在行的所有相关数据
  //TODO：处理数据变更
});

2.获取修改后的数据

在编辑事件触发后，我们可以通过 table.cache[tableName] 获取表格的全部数据（包括被修改后的数据），然后使用循环遍历的方式，对比修改前后的数据，从而得到被修改的数据。

下面是获取修改后的数据的代码：

table.on('edit(tableName)', function(obj){
  //... 
  var afterModData = table.cache[tableName];
  //TODO：遍历获取被修改的数据
});

3.处理数据变更

当我们获取到被修改过的数据后，就需要对其进行处理。根据实际业务需求，处理方法可能会有所不同。例如，如果需要把修改过的数据进行保存，可以通过Ajax请求将数据提交到后端。如果需要重新渲染表格，可以直接调用table.reload(tableName, {data: newData})实现。

下面是处理数据变更的代码：

table.on('edit(tableName)', function(obj){
  //...
  var afterModData = table.cache[tableName];
  //TODO：遍历获取被修改的数据
  //保存数据
  $.ajax({
    url: 'api/saveData',
    dataType: 'json',
    type: 'POST',
    data: {'modData': JSON.stringify(modifyData)},
    success: function(data){
      if (data.code == 0){
        //重新加载表格数据
        table.reload(tableName, {
          data: newData,
          page: {
            curr: 1 //重新从第一页开始
          }
        });
      }
    }
  });
});

总结

Layui表格数据变更的处理方式有很多种，上面的方法只是其中的一种。在实际开发中，我们可以根据具体的业务需求来选择不同的方法来处理表格数据的变更。

希望本文能给大家带来一些帮助，在使用Layui table时能够处理好表格数据的变更。