layui的表单删除编辑功能ajax请求后端数据

示例
源代码数据是通过动态请求的方式

layui.use('table', function(){
  var table = layui.table;
  table.render({
    elem: '#test'
    ,url:'/get_parameter'/*tpa=https://www.layui.site/test/table/demo1.json*/
    ,title: '用户数据表'
    ,cols: [[
      {type: 'checkbox', fixed: 'left'}
      ,{field:'id', title:'ID', width:160, fixed: 'left', unresize: true, sort: true}
      ,{field:'parameter_name', title:'参数名称', width:150, edit: 'text',align: "center", valign: "middle"}
      ,{field:'parameter_values', title:'参数值', width:150, edit: 'text',align: "center", valign: "middle"}
      ,{field:'scheduling_organization_number', title:'参数组织编号', width:150, edit: 'text',align: "center", valign: "middle"}
      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150,align: "center", valign: "middle"}
    ]]
  });
});

删除跟编辑功能

#添加两个按钮
<script type="text/html" id="barDemo" style="text-align: center;">
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit"  style="margin: auto">编辑</a>
</script>

#删除与编辑的功能代码

table.on('tool(test)', function(obj){
    var data = obj.data;
    //console.log(obj)
    console.log(data.id)
    if(obj.event === 'del'){
      layer.confirm('真的删除行么', function(index){
        obj.del();
        layer.close(index);
        $.ajax({
            type: 'delete',   
            url: '/parameter_del/'+data.id,   //请求接口数据
            dataType: "json",
            success: function (data) {//res为相应体,function为回调函数
                layer.msg("删除成功");
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                layer.msg("删除失败");
            }
        });
        layer.msg("删除成功");
      });
    } else if(obj.event === 'edit'){
        let html = '<div class="layui-form-item"><label class="layui-form-label">参数名称</label><div class="layui-input-block"><input type="text" id="parameter_name" name="parameter_name" lay-verify="title" autocomplete="off" value="'
        html += obj.data.parameter_name
        html += '" class="layui-input"></div></div>'
        html += '<div class="layui-form-item"><label class="layui-form-label">参数值</label><div class="layui-input-block"><input type="text" id="parameter_values" name="parameter_values" lay-verify="title" autocomplete="off" value="'
        html += obj.data.parameter_values
        html += '" class="layui-input"></div></div>'
        html += '<div class="layui-form-item"><label class="layui-form-label">参数组织编号</label><div class="layui-input-block"><input type="text" id="scheduling_organization_number" name="scheduling_organization_number" lay-verify="title" autocomplete="off" value="'
        html += obj.data.scheduling_organization_number
        html += '" class="layui-input"></div></div>'
        layer.confirm('修改', {
          content: html,
          btn: ['提交','取消'] //按钮
        }, function(){
            let parameter_name = $('#parameter_name').val()
            let parameter_values = $('#parameter_values').val()
            let scheduling_organization_number = $('#scheduling_organization_number').val()
            console.log(data.id)
          $.ajax({
            type: 'post',
            url: '/parameter_del/1',
            data: {
              "id":data.id,
              "parameter_name": parameter_name,
              "parameter_values": parameter_values,
              "scheduling_organization_number": scheduling_organization_number,
            },
            dataType: "json",
            success: function (data) {//res为相应体,function为回调函数
                layer.msg("修改成功");
                window.location.reload()
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                layer.msg("修改失败");
            }
            });
        }, function(){
          layer.msg('取消成功！');
        });

删除功能

编辑功能

单独的删除功能代码如下

table.on('tool(test)', function(obj){
    var data = obj.data;
    //console.log(obj)
    console.log(data.id)
    if(obj.event === 'del'){
      layer.confirm('真的删除行么', function(index){
        obj.del();
        layer.close(index);
        $.ajax({
            type: 'delete',
            url: '/deluser/'+data.id,
            dataType: "json",
            success: function (data) {//res为相应体,function为回调函数
                layer.msg("删除成功");
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                layer.msg("删除失败");
            }
        });
        //layer.msg("删除成功");
      });
    }
  });

单独的编辑功能代码如下

  //监听行工具事件
  table.on('tool(test)', function(obj){
    var data = obj.data;
    if(obj.event === 'edit'){
        let html = '<div class="layui-form-item"><label class="layui-form-label">当班人员</label><div class="layui-input-block"><input type="text" id="duty_name" name="duty_name" lay-verify="title" autocomplete="off" value="'
        html += obj.data.duty_name
        html += '" class="layui-input"></div></div>'
        html += '<div class="layui-form-item"><label class="layui-form-label">电话</label><div class="layui-input-block"><input type="text" id="phone" name="phone" lay-verify="title" autocomplete="off" value="'
        html += obj.data.phone
        html += '" class="layui-input"></div></div>'
        html += '<div class="layui-form-item"><label class="layui-form-label">是否当班</label><div class="layui-input-block"><input type="text" id="duty_status" name="duty_status" lay-verify="title" autocomplete="off" value="'
        html += obj.data.duty_status
        html += '" class="layui-input"></div></div>'
        html += '<div class="layui-form-item"><label class="layui-form-label">组织编号</label><div class="layui-input-block"><input type="text" id="scheduling_organization_number" name="scheduling_organization_number" lay-verify="title" autocomplete="off" value="'
        html += obj.data.scheduling_organization_number
        html += '" class="layui-input"></div></div>'
        layer.confirm('修改', {
          content: html,
          btn: ['提交','取消'] //按钮
        }, function(){
            let duty_name = $('#duty_name').val()
            let phone = $('#phone').val()
            let duty_status = $('#duty_status').val()
            let scheduling_organization_number = $('#scheduling_organization_number').val()
            console.log(data.id)
          $.ajax({
            type: 'post',
            url: '/scheduling_alt',
            data: {
              "id":data.id,
              "duty_name":duty_name,
              "phone": phone,
              "duty_status": duty_status,
              "scheduling_organization_number": scheduling_organization_number,
            },
            dataType: "json",
            success: function (data) {//res为相应体,function为回调函数
                layer.msg("修改成功");
                window.location.reload()
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                layer.msg("修改失败");
            }
            });
        }, function(){
          layer.msg('取消成功！');
        });

    }
  });