layer 多弹层传值

layer是一个很不错的弹层组件
但在某些特定场景下,互相传值不太友好

场景

共三个页面 分别是 列表页 ,编辑页,再加一个编辑页弹出的顶层页
难点:编辑页再弹出父级窗口选择后传值到编辑页

列表页

新增 编辑里弹出iframe,强行指定ID但这个ID是iframe外层的divID

layer.open({
  type: 2, 
  id:'nb_add', //这里的ID新增编辑最好分开 如nb_add nb_edit
  content: '编辑.html' 
}); 

编辑页

  • 此弹层是列表页iframe的id为列表页指定
  • 再弹出选择页需要同时传递本iframe
layer.open({
  type: 2, 
  content: '选择.html?pop_src=nb_add'  //需要传递页iframe的id以便查找
}); 
//回调
var callback = function (e){
	console.log(e)
}

选择页

//关闭本层的id
let index = parent.layer.getFrameIndex(window.name);
try {
    //非二次弹层回调
    parent.callback && parent.callback (data) 
} catch (error) {
    //二次弹层回调
    //{$pop_src}为URL传递来的目标iframe的id 这里是php的模板标签,根据需要修改
    try {
        let _w = parent.layui.$("#{$pop_src}").find("iframe")[0].contentWindow;
        _w.callback && _w.callback (data);
    } catch (error) {
        //没有找到回调时显示内容
        layer.msg(data); //如果data非字符请转换后显示JSON.stringify()
    }
}
parent.layer.close(index);

到此 多页面传值已完成,以上代码生产环境调试通过!
个人笔记,仅做参考!

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读