layui-table表格头工具栏编辑事件（弹子窗口）

layui-table中有两个地方有编辑功能，这两个地方略有不同，但基本原理都是一样的。

image.png

这里我实现的方式是弹出一个子窗口页面，将选中要编辑的数据依此放到子窗口中，进行编辑操作。如下图所示：

image.png

首先给大家展示一下 “行工具事件” 中的 “编辑” 功能代码，然后再演示 “头工具事件”中的 “编辑” 功能代码，大家做下对比。

  //监听行工具事件
  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
    var data = obj.data //获得当前行数据（json格式的键值对）
    ,layEvent = obj.event //获得 lay-event 对应的值（编辑、删除、添加）
    ,editList=[]; //存放获取到的那条json数据中的value值（不放key）
    $.each(data,function(name,value) {//循环遍历json数据
        editList.push(value);//将json数据中的value放入数组中（下面的子窗口显示的时候要用到）
    });
    if(layEvent === 'edit'){ 
             //脚本编辑弹出层
               var name = encodeURIComponent(data.toolName);
                 // console.log(data.toolName);
                layer.open({
                   type: 2,
                   title: '编辑学员信息', 
                   shadeClose: true,
                   shade: 0.8,
                   maxmin: true,
                   area: ['70%', '70%'],
                   content: '${pageContext.request.contextPath}/jsp/studentEdit.jsp?toolSceneId='+data.toolSceneId+'&'+'id='+data.id,//设置你要弹出的jsp页面
                   success: function(layero, index){  
                       var body = layer.getChildFrame('body', index);  
                       var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();  
                       var inputList = body.find("input");//获取到子窗口的所有的input标签
                       for (var i = 0; i < inputList.length; i++ ) { 
                          $(inputList[i]).val(editList[i]); //遍历子窗口的input标签，将之前数组中的值一次放入显示
                       }    
                   }   
                });  
     }
   });

studentEdit.jsp中的表单，基本没啥要求，只要除了id字段的其他字段能修改就ok：

<form class="layui-form" action="">

 <div class="layui-form-item">
  <div class="layui-inline">
      <label class="layui-form-label">id</label>
      <div class="layui-input-inline">
        <input name="id" lay-verify="required" readonly="" autocomplete="off" class="layui-input" type="text">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">用户名</label>
      <div class="layui-input-inline">
        <input name="name" lay-verify="required" autocomplete="off" class="layui-input" type="text">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">性别</label>
      <div class="layui-input-inline">
        <input name="sex" lay-verify="required" autocomplete="off" class="layui-input" type="text">
      </div>
    </div>
   
    <div class="layui-inline">
      <label class="layui-form-label">城市</label>
      <div class="layui-input-inline">
        <input name="city" lay-verify="required" autocomplete="off" class="layui-input" type="text">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">邮箱</label>
      <div class="layui-input-inline">
        <input name="email" lay-verify="email" autocomplete="off" class="layui-input" type="text">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">专业 </label>
      <div class="layui-input-inline">
        <input name="major" lay-verify="required" autocomplete="off" class="layui-input" type="text">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">成绩 </label>
      <div class="layui-input-inline">
        <input name="score" lay-verify="required|number" autocomplete="off" class="layui-input" type="text">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">备注 </label>
      <div class="layui-input-inline">
        <input name="sign" lay-verify="required" autocomplete="off" class="layui-input" type="text">
      </div>
    </div>
    <div class="layui-inline">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit="" lay-filter="editStudent">立即提交</button>
    </div>
  </div>
  </div>
</form>

studentEdit.jsp中的layui提交修改的代码：

<script>
layui.use(['form', 'layedit'] ,function(){
  var $ = layui.jquery
  ,form = layui.form
  ,layer = layui.layer
  ,layedit = layui.layedit; 
  var index = parent.layer.getFrameIndex(window.name); //修改成功的时候点击 确定 会关闭子窗口，这里获取一下子窗口
  form.render();
  //监听提交
  form.on('submit(editStudent)', function(data){ //这块要跟表单中的lay-filter="editStudent"对应
    $.ajax({          
              url: "${pageContext.request.contextPath}/students/editStudent",       
              type: "post",                
              async: false,   //不要让它异步提交
              data: data.field,                  
              dataType: "json",       
              success: function (data) {      
                  if(data.msg!='0'){ 
                      layer.alert("修改成功",{icon: 1,time:2000},function () {
                            layer.close(layer.index); 
                            window.parent.location.reload();    //重新加载父页面，进行数据刷新
                        });   
                    } else{
                        layer.alert("修改失败",{icon: 2,time:2000});
                    }
                }   
            });  
    return false;
  });
   
});
</script>

大概的效果是这样的：

Video_2018-12-03_112507[00-00-00--00-00-30].gif

“头工具事件”中的 “编辑” 功能的layui代码如下：（除了获取行数据的格式那块代码有点不同以外，其他原理都一样）

//监听头工具栏事件
  table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id)
    ,data = checkStatus.data //获取选中的数据
    ,editList=[]; 
    for(var i=0;i<data.length;i++){ //因为这块获取的是数组，所以当前行数据应该为数组中的第一条，所以要遍历数组
        $.each(data[i],function(name,value) {
        editList.push(value);
    }); }
    //既然获取的是数组，那也可以这样写（去掉for循环，获取下标为0的数据）
    /*
      $.each(data[0],function(name,value) {
          editList.push(value);
      });
    */ 
    switch(obj.event){ 
      case 'update':
        if(data.length === 0){
          layer.msg('请选择一行');
        } else if(data.length > 1){
          layer.msg('只能同时编辑一个');
        } else {
            //脚本编辑弹出层
            var name = encodeURIComponent(data.toolName); 
            layer.open({
               type: 2,
               title: '编辑学员信息', 
               shadeClose: true,
               shade: 0.8,
               maxmin: true,
               area: ['70%', '70%'],
               content: 'studentEdit.jsp?toolSceneId='+data.toolSceneId+'&'+'id='+data.id,
               success: function(layero, index){  
                   var body = layer.getChildFrame('body', index);  
                   var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();  
                   var inputList = body.find("input"); 
                   for (var i = 0; i < inputList.length; i++ ) {  
                      $(inputList[i]).val(editList[i]); 
                   }    
               }   
            });      
        }
      break;
 }); 

功能的实现都写在代码注释中了，大家仔细研究代码就可以了。
layui的学习，还是要多看文档多实践的，希望对大家有所帮助。