详解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 相关文章推荐
基于jquery的表头固定的若干方法
Jan 27 Javascript
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
Jul 31 Javascript
Javascript中的delete操作符详细介绍
Jun 06 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
Feb 26 Javascript
JQuery工具函数汇总
Jun 15 Javascript
JS组件Bootstrap Select2使用方法解析
May 30 Javascript
使用Curl命令查看请求响应时间方法
Nov 04 Javascript
bootstrap suggest搜索建议插件使用详解
Mar 25 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
ES6学习教程之对象的扩展详解
May 02 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
原生js实现获取form表单数据代码实例
Mar 27 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
基于HTTP长连接的&quot;服务器推&quot;技术的php 简易聊天室
2009/10/31 PHP
php getimagesize 上传图片的长度和宽度检测代码
2010/05/15 PHP
PHP中获取文件扩展名的N种方法小结
2012/02/27 PHP
深入理解php的MySQL连接类
2013/06/07 PHP
叫你如何修改Nginx与PHP的文件上传大小限制
2014/09/10 PHP
PHP里的单例类写法实例
2015/06/25 PHP
网页的分页下标生成代码(PHP后端方法)
2016/02/03 PHP
分享PHP-pcntl 实现多进程代码
2016/09/30 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
javascript dom 操作详解 js加强
2009/07/13 Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
2010/10/29 Javascript
jquery关于图形报表的运用实现代码
2011/01/06 Javascript
DB.ASP 用Javascript写ASP很灵活很好用很easy
2011/07/31 Javascript
js判断IE浏览器版本过低示例代码
2013/11/22 Javascript
BootStrap文件上传样式超好看【持续更新】
2016/05/10 Javascript
jQuery插件autocomplete使用详解
2017/02/04 Javascript
Vue.js tab实现选项卡切换
2017/05/16 Javascript
JavaScript设计模式之策略模式详解
2017/06/09 Javascript
使用Node.js实现简易MVC框架的方法
2017/08/07 Javascript
Vue渲染函数详解
2017/09/15 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
2018/08/25 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
[47:06]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第一局
2016/03/05 DOTA
python对指定目录下文件进行批量重命名的方法
2015/04/18 Python
python下载图片实现方法(超简单)
2017/07/21 Python
mac 安装python网络请求包requests方法
2018/06/13 Python
对python中的six.moves模块的下载函数urlretrieve详解
2018/12/19 Python
Python3 chardet模块查看编码格式的例子
2019/08/14 Python
德国PC硬件网站:CASEKING
2016/10/20 全球购物
波兰在线运动商店:YesSport
2020/07/23 全球购物
质检员的岗位职责
2013/11/15 职场文书
工作的心得体会
2013/12/31 职场文书
前台文员职责范本
2014/03/07 职场文书
党的群众路线对照检查材料思想汇报(学校)
2014/10/04 职场文书
哪类餐饮行业,最适合在高校创业?
2019/08/19 职场文书
K8s部署发布Golang应用程序的实现方法
2021/07/16 Golang