关于前端:layui-如何在页面型弹窗内控制外层关闭并刷新列表

3次阅读

共计 919 个字符,预计需要花费 3 分钟才能阅读完成。

在应用 layui 弹窗类型是页面弹窗时,在弹窗外部想调用内部的办法进行敞开自身比拟麻烦(因为应用了 iframe 不在一个 window 中)。咱们能够把敞开弹窗的操作传递到弹窗内。
建设一个弹窗 dialog,弹窗内容是另一个 add 页面:

     var dialog = layer.open({
              type: 2,
              title: "增加",
              closeBtn: 1,
              id: "detail",
              area: ["100%", "100%"],
              content: "add.html?id=" + data.id,
              zIndex: layer.zIndex,
              success: function (layero, index) {window[layero.find("iframe")[0]["name"]].back = function (cb) {cb && cb();
                  initTable();
                layui.close()};
              },
            });

弹窗创立实现之后找到对应的 iframe name 而后取到对应的 window
在弹窗外部 iframe 的 window 中的作用域里增加敞开弹窗的函数(在获取到的 window 能够增加任何货色,相当于与父 window 建设了通信):

         window[layero.find("iframe")[0]["name"]].back = function (cb) {cb && cb();// 回调
                  initTable();// 是一个刷新列表的函数
                layui.close()};

而后在弹窗里提交申请实现后就能够执行以后 window 的 back 办法返回列表页面了:

 function submitAdd(status) {
      request({
        url:  "/add",
        isJson: true,
        data: JSON.stringify({
          id: 1,
          status: 2,
          desc: 3,
        }),
        method: "post",
        success: function (res) {if (res.code == 0) {layer.msg(res.description);
            setTimeout(function () {window.back();
            }, 1000);
            // 返回列表页
          }
        },
        error: function (msg) {layer.msg("后盾谬误");
        },
      });
    }
正文完
 0