关于layer.open弹出表单初始化和表单提交更新表格的问题

蔚落 2022-05-17 11:25 653阅读 0赞

**项目需求：点击表格修改按钮后传入当前tr的值赋值给弹出层的表单（初始值），然后通过修改表单里面的值来提交到后台并更新页面表格数据**  
![这里写图片描述][70]  
首先给按钮绑定弹出层事件，然后初始化表单值

layer.open({
                title: '仓储信息修改',
                type: 2,
                skin: 'layui-layer-rim', //加上边框
                area: ['40%', '50%'], //宽高
                content: '/admin/changeStor.html', //弹出的页面
                shadeClose: true, //点击遮罩关闭
                success: function (layero, index) {
                    var body = layer.getChildFrame('body', index);
                    var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                    //console.log(body.html()) //得到iframe页的body内容
                    //初始化表单数据的值
                    body.find(".classifyid").val(classifyid); //要修改的每个td的值存为变量传进去
                    body.find(".s_name").val(s_name);
                    body.find(".phone").val(phone);
                    body.find(".city").val(city);
                    body.find(".country").val(country);
                    body.find(".postcode").val(postcode);
                    body.find(".address").val(address);
                    body.find(".address2").val(address2);
                }
            });

效果如图：  
![这里写图片描述][70 1]

然后通过确认修改按钮提交表单修改数据并异步请求后台；

//弹出层提交按钮：
        form.on('submit(changStor_btn)', function(data){
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            $.ajax({
                url: '../',
                type: "",
                dataType: "json",
                data:{/**传入后台的修改后的值**/},
                success:function(data){
                    if(data.code==0){
                        layer.msg('修改成功');
                        parent.layer.close(index); //再执行关闭
                        parent.$(".refresh").click();//通过触发页面局部刷新按钮来刷新父页面更新修改后的表格数据
                    }
                    if(data.code==-1){
                        layer.msg("登录超时",function(){
                            window.location.href="../login.html";
                        });
                    }
                    if(data.code==1){
                        layer.msg(data.msg);
                    }
                }
            });
            return false;
        });

特别要注意初始化弹出层表单的值（初始化赋值踩了半天的坑）：

var body = layer.getChildFrame('body', index);
    var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
    //console.log(body.html()) //得到iframe页的body内容
    body.find(".classifyid").val(classifyid);

layer弹出层详解文档参考：https://blog.csdn.net/daye5465/article/details/77430689  
layer弹出层的关闭及父页面的刷新问题：https://blog.csdn.net/kule1208/article/details/78790228  
希望对你有帮助~

[70]: /images/20220517/ef11c1a3c4dd413982cab6ba9add4e4c.png
[70 1]: /images/20220517/bdae6db6db054219917a205bf161812f.png