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

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

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);
            }
        });

效果如图:
这里写图片描述

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

 //弹出层提交按钮:
    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

猜你喜欢

转载自blog.csdn.net/wyp_comeon/article/details/81566301