最近用layui+tp5 开发一个项目，看到layui可以用弹出层做编辑界面，正好可以体验一下。

后台管理员管理的编辑打算用弹出层做一下，顺便给大家解决一些坑。

首先必须引入：

layui.use(['layer','form'], function(){

})

因为我是将弹出层直接写在列表页没有单独写一个页面

//监听行工具事件
      table.on('tool(test)', function(obj){
        var data = obj.data;
        if(obj.event === 'del'){
          layer.confirm('真的删除行么', function(index){
            obj.del();
            layer.close(index);
          });
        } else if(obj.event === 'edit'){
        
        }
      })

这是数据表格的监听行代码 我们就在  edit里面写我们的弹出代码

layer.open({
            type: 1,  //1 页面层  2ifream层  
            title: '编辑管理员',
            shadeClose: true,
            shade: 0,
            anim: 2, //动画
            maxmin: false,
            area: ['40%'], //设定弹出层的宽高，我这里设置一个宽，高度自动
            btn: ['确定', '取消'],
            content: $("#editWindow"), //弹出层的id
            success:function(index,layero){
                //这里是弹出界面需要用到数据
            }
            ,yes:function(index,layero){
                //这里是点击确定后需要发送的数据
            }
          })

<div id="editWindow" style="margin: 10px; display: none;">
// 这个是弹出层的代码  id="editWindow" 需要和 js代码中 content 的id一致

.... 这里写 你的表单代码

</div>

到此，大家应该大概了解弹出层代代码结构，点击编辑后 就可以弹出层了，下面我们说下下拉框和单选怎么取值，赋值，默认值

// 这是给弹出层赋值，即：将数据库里的值填充到表单中
success:function(index,layero){
              // 下面用到的data 就是当前行的所有数据
              $("#username").val(data.username) // 这是普通的单行文本
              $("#status").val(data.status) // 这是个单选
              $("#groupId").val(data.groupId) //这是个下拉框
              $("#status [value='"+data.status+"']").prop("checked", "checked") // 这是给默认选中项加选中属性
              $("#groupId [value='"+data.groupId+"']").prop("selected", "selected") //这是给下拉框添加默认选中
              layui.form.render()//重新渲染表单
              //你以为这就完了么？
              
              // 监听下拉框的改变
              layui.form.on('select(groupId)', function(data){
                $("#groupId").val(data.value)
              })
              // 监听单选按钮
              layui.form.on('radio(status)', function(data){
                $('#status').val(data.value)
              })
              },

这样就可以 将数据库中的值赋值到弹出层 并且下拉框 和 单选  可以监听到变化 将最后选择的value 发送出去。下面看下编辑的整个js代码

layer.open({
            type: 1,
            title: '编辑管理员',
            shadeClose: true,
            shade: 0,
            anim: 2, //动画
            maxmin: false,
            area: ['40%'],
            btn: ['确定', '取消'],
            content: $("#editWindow"),
            success:function(index,layero){
              $("#id").val(data.id)
              $("#username").val(data.username)
              $("#password").val()
              $("#email").val(data.email)
              $("#status").val(data.status)
              $("#groupId").val(data.groupId)
              $("#status [value='"+data.status+"']").prop("checked", "checked")
              $("#groupId [value='"+data.groupId+"']").prop("selected", "selected")
              layui.form.render()
              // 监听下拉框的改变
              layui.form.on('select(groupId)', function(data){
                $("#groupId").val(data.value)
              })
              // 监听单选按钮
              layui.form.on('radio(status)', function(data){
                $('#status').val(data.value)
              })
                  
            },
            yes:function(index,layero){             
              $.post("{:url('Admin/edit')}",{
                id: data.id,
                username: $('#username').val(),
                password: $('#password').val(),
                groupId: $('#groupId').val(),
                status: $("#status").val(),
              },function(data){
                console.log(data);
                if (data > 0) {
                  layer.alert('编辑成功',{icon:1,title:'提示'},function(i) {
                    layer.close(i)
                    layer.close(index)// 关闭弹出层
                    // 重载弹出层
                    $("#editForm")[0].reset()
                  })
                  // 重新渲染列表数据
                  table.reload('test', {
                    page:{
                      curr: 1
                    }
                  })
                }
              })


            }
          })