Ajax layui动态表格增删改查

好的，下面是使用 Ajax 和 layui 实现动态表格增删改查的一个简单示例。

1. 引入 layui

首先需要在页面中引入 layui 的相关文件，例如：

<link rel="stylesheet" href="//cdn.layui.com/layui-v2.5.6/css/layui.css">
<script src="//cdn.layui.com/layui-v2.5.6/layui.js"></script>

2. 表格的展示

接下来需要将表格展示在页面上，可以使用 layui 的 table 组件来创建表格。为了方便后续操作，可以给每一行的 tr 标签添加一个唯一的 id，例如：

<table id="table" lay-filter="table"></table>

// 渲染表格
layui.use('table', function () {
  var table = layui.table;

  table.render({
    elem: '#table',
    url: 'list.php',
    cols: [[
      {field: 'id', title: 'ID'},
      {field: 'name', title: '姓名'},
      {field: 'age', title: '年龄'},
      {fixed: 'right', title: '操作', toolbar: '#toolbar', width: 150}
    ]]
  });

  // 监听工具条按钮点击事件
  table.on('tool(table)', function (obj) {
    var data = obj.data;

    if (obj.event === 'edit') {
      // 编辑操作
      editData(data);
    } else if (obj.event === 'delete') {
      // 删除操作
      deleteData(data);
    }
  });
});

// 显示编辑模态框
function editData(data) {
  layui.use('layer', function () {
    var layer = layui.layer;

    layer.open({
      type: 1,
      title: '编辑数据',
      area: ['500px', '300px'],
      content: $('#edit-form'),
      success: function () {
        // 将数据填充到编辑表单中
        $('#edit-form input[name="id"]').val(data.id);
        $('#edit-form input[name="name"]').val(data.name);
        $('#edit-form input[name="age"]').val(data.age);
      }
    });
  });
}

// 删除操作
function deleteData(data) {
  layui.use('layer', function () {
    var layer = layui.layer;

    layer.confirm('确定删除该行数据吗？', function (index) {
      var url = 'delete.php?id=' + data.id;

      $.ajax({
        type: 'GET',
        url: url,
        success: function (response) {
          layer.close(index);
          layui.table.reload('table');
        },
        error: function () {
          alert('删除数据失败');
        }
      });
    });
  });
}

3. 添加操作

当用户点击添加按钮时，需要显示一个模态框，让用户输入新数据。可以使用 layui 的 layer 组件来创建模态框，使用 jQuery 的 ajax() 方法来发送请求，将新数据添加到后端数据库中。例如：

<script type="text/html" id="toolbar">
  <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
</script>

<div id="add-form" style="display: none;">
  <form class="layui-form" lay-filter="add-form">
    <div class="layui-form-item">
      <label class="layui-form-label">姓名</label>
      <div class="layui-input-block">
        <input type="text" name="name" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">年龄</label>
      <div class="layui-input-block">
        <input type="text" name="age" class="layui-input">
      </div>
    </div>
  </form>
</div>

<script>
  // 添加操作
  layui.use(['layer', 'form'], function () {
    var layer = layui.layer;
    var form = layui.form;

    layui.table.on('toolbar(table)', function (obj) {
      if (obj.event === 'add') {
        layer.open({
          type: 1,
          title: '添加数据',
          area: ['500px', '300px'],
          content: $('#add-form'),
          success: function () {
            // 清空表单数据
            $('#add-form input[name="name"]').val('');
            $('#add-form input[name="age"]').val('');
          }
        });
      }
    });

    form.on('submit(add-form)', function (data) {
      $.ajax({
        type: 'POST',
        url: 'add.php',
        data: data.field,
        success: function (response) {
          layer.closeAll();
          layui.table.reload('table');
        },
        error: function () {
          alert('添加数据失败');
        }
      });

      return false;
    });
  });
</script>

4. 编辑操作

当用户点击编辑按钮时，需要将该行的数据加载到编辑模态框中，让用户进行修改。可以使用 layui 的 layer 组件来创建模态框，使用 jQuery 的 ajax() 方法来发送请求，更新后端数据库中的数据。例如：

<div id="edit-form" style="display: none;">
  <form class="layui-form" lay-filter="edit-form">
    <div class="