详解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操作JSON的要领总结
Dec 09 Javascript
jquery对象和DOM对象的区别介绍
Aug 09 Javascript
AngularJS中使用HTML5手机摄像头拍照
Feb 22 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
Jun 18 Javascript
JavaScript中的ajax功能的概念和示例详解
Oct 17 Javascript
浅谈jquery页面初始化的4种方式
Nov 27 Javascript
解析jquery easyui tree异步加载子节点问题
Mar 08 Javascript
利用n工具轻松管理Node.js的版本
Apr 21 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
Jun 12 Javascript
angularjs 缓存的使用详解
Mar 19 Javascript
vue实现购物车功能(商品分类)
Apr 20 Javascript
AJAX XMLHttpRequest对象创建使用详解
Aug 20 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
ThinkPHP中RBAC类的四种用法分析
2014/11/24 PHP
laravel-admin解决表单select联动时,编辑默认没选上的问题
2019/09/30 PHP
JavaScript基本对象
2007/01/11 Javascript
JQuery 风格的HTML文本转义
2009/07/01 Javascript
js 文件引入实现代码
2010/04/23 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
JavaScript实现页面实时显示当前时间的简单实例
2013/07/20 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
2016/10/04 Javascript
Angular2 路由问题修复详解
2017/03/01 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
2017/03/13 Javascript
angular使用bootstrap方法手动启动的实例代码
2017/07/18 Javascript
详解微信小程序实现WebSocket心跳重连
2018/07/31 Javascript
vue界面发送表情的实现代码
2020/09/11 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
2020/11/05 Javascript
[27:02]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第三场
2014/05/24 DOTA
[03:12]完美世界DOTA2联赛PWL DAY6集锦
2020/11/05 DOTA
Python3简单实现串口通信的方法
2019/06/12 Python
解决Python3 控制台输出InsecureRequestWarning问题
2019/07/15 Python
关于pytorch多GPU训练实例与性能对比分析
2019/08/19 Python
python英语单词测试小程序代码实例
2019/09/09 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
Python使用plt.boxplot() 参数绘制箱线图
2020/06/04 Python
Spy++的使用方法及下载教程
2021/01/29 Python
阿迪达斯加拿大官网:Adidas加拿大
2016/08/25 全球购物
前台文员的岗位职责
2013/11/14 职场文书
中国文明网签名寄语
2014/01/18 职场文书
红色故事演讲稿
2014/05/22 职场文书
2014标准社保办理委托书
2014/10/06 职场文书
教育合作协议范本
2014/10/17 职场文书
房产协议书范本
2014/10/18 职场文书
党员自评材料范文
2014/12/17 职场文书
2016见义勇为事迹材料汇总
2016/03/01 职场文书
php引用传递
2021/04/01 PHP
JavaScript 事件捕获冒泡与捕获详情
2021/11/11 Javascript
JavaScript正则表达式实现注册信息校验功能
2022/05/30 Java/Android