zoukankan      html  css  js  c++  java
  • layui框架中layer父子页面交互的方法分析

    本文实例讲述了layui框架中layer父子页面交互的方法。分享给大家供大家参考,具体如下:

    layer是一款近年来备受青睐的web弹层组件,官网地址是:http://layer.layui.com/

    可以从官网上下载最新版本。

    还可点击此处本站下载

    当layer以iframe层的方式弹出新的窗口(子页面),如何在子页面中访问父页面的元素和函数。

    1、访问父页面元素值

    1
    var parentId=parent.$("#id").val();//访问父页面元素值

    2、访问父页面方法

    1
    var parentMethodValue=parent.getMethodValue();//访问父页面方法

    3、如何关闭弹出的子页面窗口

    1
    2
    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
    parent.layer.close(index);//关闭弹出的子页面窗口

    4、如何从子页面执行刷新父页面操作

    1
    parent.location.reload(); // 父页面刷新

    附:layer弹出多个iframe找到父页面的方法

    父页面:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    function aa(){
        var index = parent.layer.getFrameIndex(window.name);
        var iframeName = 'layui-layer-iframe'+index;
        openDialog1('选择XXX', '${ctx}/*****,'800px', '500px',iframeName);
    }
    function openDialog1(title,url,width,height,target){
        top.layer.open({
          type: 2,
          area: [width, height],
          title: title,
          maxmin: true, //开启最大化最小化按钮
          content: url ,
          btn: ['确定', '关闭'],
          yes: function(index, layero){
             var body = top.layer.getChildFrame('body', index);
             var iframeWin = layero.find('iframe')[0]; //得到iframe页的窗口对象,执行iframe页的方法:iframeWin.method();
             var inputForm = body.find('#inputForm');
             var top_iframe;
             if(target){
               top_iframe = target;//如果指定了iframe,则在改frame中跳转
             }else{
               top_iframe = top.getActiveTab().attr("name");//获取当前active的tab的iframe
             }
             inputForm.attr("target",top_iframe);//表单提交成功后,从服务器返回的url在当前tab中展示
             if(iframeWin.contentWindow.doSubmit(top_iframe) ){
               top.layer.close(index);//关闭对话框。
               top.window[iframeName].frames.location.reload();//刷新父亲
             }
         },
         cancel: function(index){
          }
      });
    }
    //子页面回调方法
    function addRecord(name,chainName){
      alert(name);
    }

    子页面

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    function doSubmit(iframeName) {
        var sel=$("tbody tr td input.i-checks:checked");
        var size = sel.size();
        if(size==0){
          top.layer.alert('请至少选择一条数据!', {icon: 0, title:'警告'});
          return false;
        }else{
          for(var i=0;i<size;i++){
            top.window[iframeName].addRecord(sel[i].name,sel[i].value);
          }
          return true;
        }
    }

    另:layui完整源码可点击此处本站下载

  • 相关阅读:
    博客搬家了,新域名dinphy.wang
    Win7 SP1 32位 旗舰版 IE8 快速稳定 纯净优化 无人值守 自动激活 20170518
    Win7 SP1 64位 旗舰版 IE8 快速稳定 纯净优化 无人值守 自动激活 20180604
    红米3 TWRP-3.2.1-0(android_7.1.2_r29) 刷8.1不提示错误 刷MIUI不再卡屏 修复无系统重启问题 更新于20180316
    SudaMod-81.0 / crDroidAndroid-8.1(android-8.1.0_r20)红米3 2018年5月3日更新
    windows 10专业版14393.447 64位纯净无广告版系统 基于官方稳定版1607制作 更新于20161112
    Deepin 15.5上安装 Node.js
    在github上搭建个人博客
    Deepin 系统下安装VMware并激活
    Windows 10 Version 1803 (Updated March 2018) MSDN 镜像下载
  • 原文地址:https://www.cnblogs.com/Jeely/p/10947778.html
Copyright © 2011-2022 走看看