Layui关闭弹窗返回值的两种方式(二)

二、操作弹窗打开的子页面返回值

        场景:此处小编的场景是操作ztree树,其实和操作列表都是一样的。通过点击增加按钮弹窗选择树节点,关闭窗口返回值

1、先说子页面

1-1、html代码

        在body中只需要加以下一句话就可以啦,

<ul id="treeDemo2" class="ztree larry-ztree-demo2" style="margin-left:20px;"></ul>

1-2、js代码

        要在js代码中加上返回的方法,以供父页面调用就OK了

function callbackdata() {
    var flag = true;
    f();
    if(resList.length>0){

    }else{
        flag = false;
        layer.msg("请至少选择一个节点")
    }
    var data = {resList : resList,
        flag : flag
    };
    return data;
}

2、再说父页面

2-1、js页面

        html页面就不多说了,就一个按钮。如下代码中,使用var res = window["layui-layer-iframe" + index].callbackdata();锁定子页面内的方法,即可拿到返回值啦。

add_undertaker: function() {
    var tit = '办案人员信息';
    var url = '../../commonbsp/personalizedbsp/tree.html?type=select';
    var index = larryms.open({
        title: tit,
        type: 2,
        shadeClose: false,
        area: ['380px', '405px'],
        content: url,
        btn: ['确定','关闭'],
        yes: function(index){
            //当点击‘确定'按钮的时候,获取弹出层返回的值
            var res = window["layui-layer-iframe" + index].callbackdata();
            //打印返回的值,看是否有我们想返回的值。
            var flag = res.flag;
            if(flag){
                //保存信息
                var json = JSON.stringify({"caseId":caseId,"items":res.resList});
                var url = dataportal_save_tree_selectors;
                $.ajax({
                    url: url,
                    async: false,
                    type: "post",
                    contentType: "application/json",
                    dataType: "json",
                    data: json,
                    success: function (data) {
                        //局部刷新表格
                        table.reload("message_undertaker");
                        //弹窗
                        layer.msg("保存成功!");
                    },
                    error: function (data, textstatus) {
                        layer.msg("保存失败!");
                    }
                });
                //最后关闭弹出层
                layer.close(index);
            }

        },
        cancel: function(){
            //右上角关闭回调
        }
    });

}

        以上就是两种方法的所有内容总结啦。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在使用 `window.addEventListener` 添加事件监听器时,如果第弹窗返回值使第一个弹窗的值丢失,可能是因为第一个弹窗的事件监听器没有被正确地清除。当第一个弹窗弹出时,JavaScript 代码会等待用户的响应,并在用户响应后执行事件监听器的回调函数。如果在第一个弹窗弹出后,没有正确地清除事件监听器,那么当第弹窗弹出时,第一个事件监听器的回调函数仍然会被执行,从而覆盖第一个弹窗返回值。 为了解决这个问题,可以在第一个弹窗关闭后,立即清除事件监听器,然后再弹出弹窗。例如: ```javascript function showDialog() { return new Promise((resolve, reject) => { const onClick = (event) => { window.removeEventListener('click', onClick); resolve(event.target); }; window.addEventListener('click', onClick); }); } async function run() { const result1 = await showDialog(); window.removeEventListener('click', onClick); // 清除第一个弹窗的事件监听器 const result2 = await showDialog(); console.log(result1, result2); } run(); ``` 在上面的代码中,`showDialog` 函数返回一个 `Promise` 对象,在该对象的回调函数中添加事件监听器,并在用户点击页面时调用 `resolve` 函数返回事件的目标元素。在 `run` 函数中,使用 `async/await` 语法依次弹出两个弹窗,并在第一个弹窗关闭后,立即清除事件监听器,然后再弹出弹窗。这样就可以避免第弹窗返回值使第一个弹窗的值丢失的问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值