关于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
希望对你有帮助~

  • 3
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
layer.openlayui框架中的一个方法,用于打开一个弹出。在引用\[2\]中的代码示例中,layer.open被用于打开一个iframe形式的弹出弹出中包含一个表单。通过设置content属性为表单所在的页面的URL,可以在弹出中显示表单。同时,可以通过success回调函数来初始化表单的值,例如给表单的各个字段赋初始值。在示例中,通过body.find(".xxx").val(xxx)的方式,将需要修改的每个字段的值传递给表单。这样,当弹出打开时,表单中的字段就会显示对应的初始值。用户可以通过修改表单中的值来提交到后台并更新页面表格数据。 #### 引用[.reference_title] - *1* *3* [关于layer.open弹出表单初始化表单提交更新表格问题](https://blog.csdn.net/wyp_comeon/article/details/81566301)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [layer.open() 【type=2 】的iframe页面的form表单提交更新父级表单](https://blog.csdn.net/weixin_41128842/article/details/103472472)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值