Layui表格行添加编辑删除操作和保存数据代码

以下是Layui表格行添加编辑删除操作和保存数据的代码示例：

HTML代码：

<div class="layui-btn-group">
  <button class="layui-btn layui-btn-sm layui-btn-normal" id="addBtn">添加</button>
  <button class="layui-btn layui-btn-sm layui-btn-danger" id="delBtn">删除</button>
</div>

<table class="layui-table" id="dataTable" lay-filter="dataTable"></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>

JS代码：

// 定义表格列
var cols = [
  {type: 'checkbox'},
  {field: 'id', title: 'ID', width: 80},
  {field: 'name', title: '名称', width: 120},
  {field: 'age', title: '年龄', width: 80},
  {field: 'address', title: '地址', width: 200},
  {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150},
];

// 初始化表格
var tableIns = layui.table.render({
  elem: '#dataTable',
  cols: [cols],
  url: '/data',
  page: true,
});

// 监听表格工具条
layui.table.on('tool(dataTable)', function(obj){
  var data = obj.data;
  if(obj.event === 'edit'){
    // 编辑行数据
    editData(data);
  } else if(obj.event === 'del'){
    // 删除行数据
    delData(data.id);
  }
});

// 添加按钮点击事件
$('#addBtn').on('click', function(){
  // 弹出添加框
  editData({});
});

// 删除按钮点击事件
$('#delBtn').on('click', function(){
  // 获取选中的行数据
  var checkStatus = layui.table.checkStatus('dataTable');
  var ids = checkStatus.data.map(function(item){ return item.id; });
  if(ids.length > 0){
    // 删除选中行数据
    delData(ids.join(','));
  } else {
    layer.msg('请选择要删除的数据');
  }
});

// 编辑行数据
function editData(data){
  var title = data.id ? '编辑' : '添加';
  layer.open({
    type: 1,
    title: title,
    content: $('#editBox'),
    area: ['600px', '400px'],
    btn: ['保存', '取消'],
    success: function(){
      // 渲染编辑表单
      layui.form.render(null, 'editForm');
      // 设置表单数据
      layui.form.val('editForm', data);
    },
    yes: function(index){
      // 获取表单数据
      var formData = layui.form.val('editForm');
      // 保存行数据
      saveData(formData, function(){
        // 刷新表格数据
        tableIns.reload();
        // 关闭弹出框
        layer.close(index);
      });
    }
  });
}

// 删除行数据
function delData(ids){
  layer.confirm('确定要删除所选数据吗？', function(index){
    // 发送删除请求
    $.ajax({
      type: 'POST',
      url: '/del',
      data: {ids: ids},
      success: function(res){
        if(res.code === 0){
          // 刷新表格数据
          tableIns.reload();
          // 关闭弹出框
          layer.close(index);
        } else {
          layer.msg(res.msg || '操作失败');
        }
      },
      error: function(){
        layer.msg('网络错误');
      }
    });
  });
}

// 保存行数据
function saveData(data, callback){
  // 发送保存请求
  $.ajax({
    type: 'POST',
    url: '/save',
    data: data,
    success: function(res){
      if(res.code === 0){
        callback && callback();
      } else {
        layer.msg(res.msg || '操作失败');
      }
    },
    error: function(){
      layer.msg('网络错误');
    }
  });
}

其中，`editData`函数用于弹出编辑框，`delData`函数用于删除行数据，`saveData`函数用于保存行数据。需根据实际情况修改请求的接口地址和参数。