详解layui弹窗父子窗口之间传参数的方法


Posted in Javascript onJanuary 16, 2018

本文介绍了layui弹窗父子窗口之间传参数的方法,分享给大家,具体如下:

1、父页面打开子页面并向子页面传参数

function setChooseValues(ret){  
    var oView = document.getElementById("userName");  
    var oValue = document.getElementById("userIds");  
    var i = 0;  
    if( ret != null){  
      oValue.value="";  
      oView.value="";  
      oView.title="";  
      for( x in ret){  
        i++;  
        oView.title=oView.title + ret[x].name+",";  
        oValue.value=oValue.value+ret[x].id+",";  
        oView.value = oView.value+ret[x].name+"\n";  
      }  
      if(i==0){  
        oView.value="";  
      }  
    }  
  }  
  function OpenFrame( oValue, oView) {  
    var dialogArgumentsA = new Array(oValue.value , spitToString(oView));  
    var url = "${rootPath}/page/system/roleallot/role_allot.jsp";  
    layer.open({  
      type: 2,  
      skin: 'layui-layer-lan',  
      title: '选择人员',  
      fix: false,  
      shadeClose: false,  
      maxmin: true,  
      id:'selectUser',  
      move: false,  
      closeBtn:2,  
      //以下代码为打开窗口添加按钮  
      /* btn: ['确定', '取消'], 
      btnAlign: 'c', 
      yes: function(index, layero){ 
        /* //layer.closeAll();//关闭所有弹出层 
        //var parentWin = layero.find('iframe')[0]; 
        var parentWin = layer.getChildFrame('body', index); 
        alert(parentWin); 
        parentWin.contentWindow.doOk(); 
        //layer.close(index);//这块是点击确定关闭这个弹出层 
      }, */  
      area: ['750px', '450px'],  
      content: url,  
      success: function(layero, index){  
        var body = layer.getChildFrame('body', index);  
        var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象,执行iframe页的方法:iframeWin.method();  
        var ids = dialogArgumentsA[0].split(",");  
        var names = dialogArgumentsA[1].split(",");  
        for (var i = 0; i < ids.length; i++ ) {  
          if ('' != ids[i]) {  
            var option = $("<option>").val(ids[i]).text(names[i]);  
            body.find('select').append(option);  
          }  
        }  
      }  
    });  
  }

2、子页面向父页面传参数并关闭弹窗

function newBuildReturnValue(selectName){ 
  var ret = new Array();  
 
     $("#"+selectName+" option").each(function(){ 
 
     //遍历所有option   
       var value = $(this).val();  //获取option值    
       var text = $(this).text();  
       if(text!=''){    
         var o = new Element(value, text, 0);  
        ret.push(o);  
       }   
    });  
   return ret;  
  }  
  //点击确定向子页面传参并关闭窗口  
  function doOk(){  
    var ret = newBuildReturnValue("select");  
    parent.setChooseValues(ret);  
    var index = parent.layer.getFrameIndex(window.name);  
    parent.layer.close(index);  
  }  
    
  //点击取消关闭窗口  
    
  function doCancel(){  
    var index = parent.layer.getFrameIndex(window.name);  
    parent.layer.close(index);  
  }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript函数作用域学习示例(js作用域)
Jan 13 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
Dec 15 Javascript
jQuery侧边栏实现代码
May 06 Javascript
JS定义类的六种方式详解
May 12 Javascript
微信小程序 form组件详解及简单实例
Jan 10 Javascript
vue.js+Echarts开发图表放大缩小功能实例
Jun 09 Javascript
vue props传值失败 输出undefined的解决方法
Sep 11 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
Aug 26 Javascript
Vuex实现数据共享的方法
Dec 20 Javascript
Javascript ParentNode和ChildNode接口原理解析
Mar 16 Javascript
Node.js API详解之 zlib模块用法分析
May 19 Javascript
Vue自定义render统一项目组弹框功能
Jun 07 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
Jan 16 #Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
Jan 16 #Javascript
AngularJS监听ng-repeat渲染完成的两种方法
Jan 16 #Javascript
微信小程序实现流程进度的图样式功能
Jan 16 #Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
Jan 16 #Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
Jan 16 #Javascript
详解layui中的树形关于取值传值问题
Jan 16 #Javascript
You might like
php explode函数实例代码
2012/02/27 PHP
PHPEXCEL 使用小记
2013/01/06 PHP
基于header的一些常用指令详解
2013/06/06 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
PHP实现基于3DES算法加密解密字符串示例
2018/08/24 PHP
jQuery 改变CSS样式基础代码
2010/02/11 Javascript
js保留两位小数使用toFixed实现
2013/07/29 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
2013/12/16 Javascript
基于javascript实现图片滑动效果
2016/05/07 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
2017/01/12 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
2017/12/25 jQuery
Bootstrap模态对话框用法简单示例
2018/08/31 Javascript
vue的全局变量和全局拦截请求器的示例代码
2018/09/13 Javascript
微信小程序实现列表的横向滑动方式
2020/07/15 Javascript
vue实现下载文件流完整前后端代码
2020/11/17 Vue.js
[02:22]完美世界DOTA2联赛PWL S3 集锦第一期
2020/12/15 DOTA
python socket 超时设置 errno 10054
2014/07/01 Python
浅谈python中的getattr函数 hasattr函数
2016/06/14 Python
windows10下安装TensorFlow Object Detection API的步骤
2019/06/13 Python
Python3 Tkinter选择路径功能的实现方法
2019/06/14 Python
Python3爬虫关于识别点触点选验证码的实例讲解
2020/07/30 Python
python在地图上画比例的实例详解
2020/11/13 Python
使用Python解析Chrome浏览器书签的示例
2020/11/13 Python
CSS3动画animation实现云彩向左滚动
2014/05/09 HTML / CSS
世界上最全面的汽车零部件和配件集合:JC Whitney
2016/09/04 全球购物
后勤人员自我鉴定
2013/10/20 职场文书
总裁秘书岗位职责
2013/12/04 职场文书
学生打架检讨书
2014/02/14 职场文书
自我推荐信范文
2014/05/09 职场文书
英语教育专业自荐信
2014/05/29 职场文书
市委常委班子党的群众路线教育实践活动整改措施
2014/10/02 职场文书
大学生自我推荐信范文
2015/03/24 职场文书
风之谷观后感
2015/06/11 职场文书
《分数的意义》教学反思
2016/02/20 职场文书
2016年学生会感恩节活动总结
2016/04/01 职场文书
mysql 子查询的使用
2022/04/28 MySQL