layUI表格新增和修改功能

layUI表格的新增和修改功能可以通过弹出层来实现。具体步骤如下：

1. 在layUI表格中添加操作列，包含“编辑”和“删除”按钮等；
2. 给“编辑”按钮绑定事件，点击后弹出一个弹出层，用于填写数据；
3. 在弹出层中添加表单，包含需要填写的数据项；
4. 给表单中的“确定”按钮绑定事件，点击后将数据提交到后台并更新表格数据；
5. 给“删除”按钮绑定事件，点击后弹出确认框，确认后将数据删除并更新表格数据。

示例代码如下：

HTML代码：

<table class="layui-table" lay-data="{url:'/api/data', page:true, limit:10}" lay-filter="demo">
  <thead>
    <tr>
      <th lay-data="{field:'id', width:80}">ID</th>
      <th lay-data="{field:'name', width:120}">名称</th>
      <th lay-data="{field:'type', width:80}">类型</th>
      <th lay-data="{field:'remark', width:200}">备注</th>
      <th lay-data="{field:'operate', toolbar:'#operateTpl', width:150}">操作</th>
    </tr>
  </thead>
</table>

<!--操作列模板-->
<script type="text/html" id="operateTpl">
  <button class="layui-btn layui-btn-xs" lay-event="edit">编辑</button>
  <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</button>
</script>

<!--弹窗模板-->
<div id="formTpl" style="display:none;">
  <form class="layui-form" action="">
    <div class="layui-form-item">
      <label class="layui-form-label">名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" 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 type="text" name="type" lay-verify="required" placeholder="请输入类型" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item layui-form-text">
      <label class="layui-form-label">备注</label>
      <div class="layui-input-block">
        <textarea name="remark" placeholder="请输入备注" class="layui-textarea"></textarea>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="submitForm">确定</button>
      </div>
    </div>
  </form>
</div>

JavaScript代码：

//执行渲染
layui.use(['table', 'layer', 'form'], function(){
  var table = layui.table,
      layer = layui.layer,
      form = layui.form;

  //监听表格操作列按钮点击事件
  table.on('tool(demo)', function(obj){
    var data = obj.data;
    if(obj.event === 'edit'){ //编辑
      //弹出编辑弹窗
      var index = layer.open({
        type: 1,
        title: '编辑',
        area: ['500px', '400px'],
        content: $('#formTpl').html(),
        success: function(layero, index){
          //填充弹窗表单数据
          form.val('form', data);
        }
      });
      //监听弹窗表单提交事件
      form.on('submit(submitForm)', function(formData){
        //提交表单数据到后台
        $.ajax({
          url: '/api/update',
          type: 'POST',
          data: formData.field,
          success: function(){
            layer.close(index);
            table.reload('demo');
          }
        });
        return false;
      });
    } else if(obj.event === 'delete'){ //删除
      layer.confirm('确认删除该数据吗？', function(index){
        //提交删除请求到后台
        $.ajax({
          url: '/api/delete',
          type: 'POST',
          data: {id: data.id},
          success: function(){
            layer.close(index);
            table.reload('demo');
          }
        });
      });
    }
  });
});