layui数据表格使用(增 删 改)

layui 是一款非常流行的前端 UI 框架，其中的数据表格组件可以非常方便地实现增删改查功能。以下是使用 layui 数据表格实现增删改操作的步骤：

1. 引入 layui 和 jQuery 库。

<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.7/css/layui.min.css">
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/layui/2.5.7/layui.min.js"></script>

2. 创建一个数据表格。

<table class="layui-table" lay-filter="demoTable"></table>

3. 配置数据表格的列和数据。

layui.use('table', function(){
  var table = layui.table;
  
  //第一个实例
  table.render({
    elem: '#demoTable',
    cols: [[
      {field: 'id', title: 'ID'},
      {field: 'username', title: '用户名'},
      {field: 'email', title: '邮箱'},
      {field: 'operate', title: '操作', toolbar: '#operateTpl'}
    ]],
    data: [
      {id: 1, username: '张三', email: 'zhangsan@example.com'},
      {id: 2, username: '李四', email: 'lisi@example.com'},
      {id: 3, username: '王五', email: 'wangwu@example.com'}
    ]
  });
});

4. 定义操作列的模板。

<script type="text/html" id="operateTpl">
  <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>

5. 监听数据表格的工具条事件。

layui.use('table', function(){
  var table = layui.table;
  
  table.on('tool(demoTable)', function(obj){
    var data = obj.data; //获取当前行的数据
    var layEvent = obj.event; //获取当前点击的事件
    
    if(layEvent === 'edit'){ //编辑操作
      //弹出编辑窗口
      layer.open({
        type: 1,
        title: '编辑用户',
        content: $('#editForm'), //引用一个页面层的方式加载修改界面表单
        area: ['500px', '400px']
      });
      
      //将当前行的数据填充到表单中
      $('#id').val(data.id);
      $('#username').val(data.username);
      $('#email').val(data.email);
      
      //监听提交按钮的点击事件
      $('#editSubmit').click(function(){
        //获取修改后的数据
        var id = $('#id').val();
        var username = $('#username').val();
        var email = $('#email').val();
        
        //更新数据
        data.id = id;
        data.username = username;
        data.email = email;
        
        //更新表格中的数据
        obj.update(data);
        
        //关闭弹出窗口
        layer.closeAll();
      });
    } else if(layEvent === 'del'){ //删除操作
      //弹出确认框
      layer.confirm('确定删除该用户吗？', function(index){
        //删除数据
        obj.del();
        
        //关闭弹出框
        layer.close(index);
      });
    }
  });
});

6. 定义一个添加用户的方法。

function addUser(){
  //弹出添加窗口
  layer.open({
    type: 1,
    title: '添加用户',
    content: $('#addForm'), //引用一个页面层的方式加载添加界面表单
    area: ['500px', '400px']
  });
  
  //监听提交按钮的点击事件
  $('#addSubmit').click(function(){
    //获取添加的数据
    var id = $('#addId').val();
    var username = $('#addUsername').val();
    var email = $('#addEmail').val();
    
    //添加数据
    var data = {id: id, username: username, email: email};
    layui.table.reload('demoTable', {
      data: [data].concat(layui.table.cache.demoTable)
    });
    
    //关闭弹出窗口
    layer.closeAll();
  });
}

7. 在页面中定义添加和修改的表单。

<!-- 添加用户的表单 -->
<div id="addForm" style="display: none;">
  <form class="layui-form">
    <div class="layui-form-item">
      <label class="layui-form-label">ID</label>
      <div class="layui-input-block">
        <input id="addId" type="text" name="id" required lay-verify="required" placeholder="请输入ID" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">用户名</label>
      <div class="layui-input-block">
        <input id="addUsername" type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">邮箱</label>
      <div class="layui-input-block">
        <input id="addEmail" type="text" name="email" required lay-verify="required" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button id="addSubmit" class="layui-btn" lay-submit lay-filter="addForm">提交</button>
      </div>
    </div>
  </form>
</div>

<!-- 编辑用户的表单 -->
<div id="editForm" style="display: none;">
  <form class="layui-form">
    <div class="layui-form-item">
      <label class="layui-form-label">ID</label>
      <div class="layui-input-block">
        <input id="id" type="text" name="id" required lay-verify="required" placeholder="请输入ID" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">用户名</label>
      <div class="layui-input-block">
        <input id="username" type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">邮箱</label>
      <div class="layui-input-block">
        <input id="email" type="text" name="email" required lay-verify="required" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button id="editSubmit" class="layui-btn" lay-submit lay-filter="editForm">提交</button>
      </div>
    </div>
  </form>
</div>

以上就是使用 layui 数据表格实现增删改操作的全部步骤。