layui的数据表格，点击自定义编辑按钮开启对某个字段来进行该行编辑更改

此方法我是从layui的相关组件中进行更改的，查了查目前几个比较大的博客平台，好像就我一个 “ 创新”了该方法！

ps：layui的组件演示中没有用到类似的 “ 按钮 ” 开启单个可编辑字段，它要么全开要么全关~

当然如果你本来就知道或者在编程中早就用过这个方法再或者在我发布该文章之前看到类似原理的文章，前面的话就当我没说，哈哈哈哈

layui的table表单，当点击自定义编辑按钮开启对某个字段来进行该行编辑更改，此处更改是非弹窗形式，而是打开该字段的可编辑模式进行更改！

例如：

当我点击自定义编辑“ 按钮1 ”时，该字段从原先的不可编辑状态变为可编辑状态，该框体的内容变为绿色（相当于提示一下“可编辑”状态），此时编辑“按钮1”变为带有 √ 的编辑“按钮2” 【按钮的切换再上一章已经给出，不会的去翻上一篇文章，举一反三就行】，编辑完成后，再次点击“按钮2”即可保存

见下方几个演示图片！！！

演示

图一

图二

图三

图四

图五我就不截图了，就是：未更改时，点击按钮2 后，提示 “未更改，，，”的消息提示！

代码

HTML：

<table class="layui-hide" id="staff_department_table" lay-filter="staff_department_table"></table>




<script id="department_caozuo" type="text/html">

<button type="button" class="layui-btn layui-btn-sm layui-btn-primary  add_department_edit_1" id="add_department_edit_1" lay-event="add_department_edit_1">
    <i class="layui-icon layui-icon-edit"></i>
  </button>


<button type="button" class="layui-btn layui-btn-sm layui-btn-primary  layui-border-green add_department_edit_2" id="add_department_edit_2" lay-event="add_department_edit_2">
    <i class="layui-icon layui-icon-ok "></i>
  </button>

</script>

css：

.add_department_edit_1{
    display:inline;
}
.add_department_edit_2{
    display:none;

}

js：

layui.use(['form','table','layer','laydate'],function(){
  var table = layui.table;
  var form = layui.form;
  var layer = layui.layer;
  var $ = layui.$;


 table.render({   

//表格的构建，我只截取了部分内容哈，这里面重点看 “ cols ” 里面的属性参数就行！
   
 elem: '#staff_department_table'
    ,url:'you_url'
    ,height: 500
    ,cellMinWidth: 80
    ,id:'staff_department_data'

,cols: [[
        {type: 'checkbox'}
      ,{title:'序号',type:'numbers'}
      ,{field:'department_name',title:'部门名称', unresize: true, sort: true, align: "center" }
      ,{field:'operation', fixed: 'right',title:'操作',templet:'#department_caozuo' , width:150  , align: "center"}
    ]]

  });

table.on('tool(staff_department_table)',function(obj){

 if (obj.event === 'add_department_edit_1') {
          console.log('点击了编辑', obj);

          // 获取当前行的索引
          var index = obj.data.LAY_TABLE_INDEX;

          // 隐藏第一个按钮，显示第二个按钮
          $(obj.tr).find('.add_department_edit_1').hide();
          $(obj.tr).find('.add_department_edit_2').show();

          // 将单元格设置为可编辑状态
          var field = 'department_name'; // 要修改的字段
          var oldValue = obj.data[field]; // 获取当前单元格的值
          var inputHtml = '<input type="text" class="layui-input" style="color: #16B777;" value="' + oldValue + '">';
          $(obj.tr).find('td[data-field="' + field + '"]').html(inputHtml);

          // 提示用户点击保存按钮
          layer.tips('点击即可保存', $(obj.tr).find('.add_department_edit_2'), { tips: 1 });

          // 监听保存按钮点击事件
          $(obj.tr).find('.add_department_edit_2').on('click', function() {
            // 获取输入框的值
                var newValue = $(obj.tr).find('td[data-field="' + field + '"] input').val();

                if(newValue.replace(/\s/g, '') === ''){
                     layer.tips('值不能为空', this, {tips: 1});
                }else{
                    // 执行保存操作，例如发送请求保存数据到后端
                    console.log('起始数据', oldValue);
                    console.log('保存成功', newValue);

                    // 将单元格恢复为非编辑状态
                    $(obj.tr).find('td[data-field="' + field + '"]').text(newValue);
                    // 隐藏保存按钮，显示编辑按钮
                    $(obj.tr).find('.add_department_edit_1').show();
                    $(obj.tr).find('.add_department_edit_2').hide();
                    layer.closeAll('tips');

                    if(oldValue ==newValue ){
                        layer.tips('未更改，已取消', $(obj.tr).find('td[data-field="' + field + '"]'), { tips: 1 } ,setTimeout(function(){layer.closeAll('tips')},700));
                        table.reload('staff_department_data');
                        return
                    }


//在此处写你的异步操作（如 ： ajax 等）
                   
                      $.ajax({    
                        
                            //在这里面写你的ajax的异步操作
                            //另外几点提示： oldValue  是更改前数据（旧数据）；newValue 是更改后数据（新数据） 这种英语不会翻译不出来吧！！！  
                                //另外 在ajax成功后 重载表格 语法 table.reload(' 注意：这里写你的table的 id 参数 '); 

                        })




                 }
          });
    }
 });
});



// 这代码有点多，我都一一给出注释了，应该能看懂了吧！！！！
//再次说明：代码 我是从我js全部代码 截取了相关部分，可能存在 “  });  ” 这相关括号未闭合情况，如有未闭合，还需要你自己再调整，反正代码没问题！！！