详解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 相关文章推荐
js中将多个语句写成一个语句的两种方法小结
Dec 08 Javascript
javascript &amp;&amp;和||运算法的另类使用技巧
Nov 28 Javascript
转换json格式的日期为Javascript对象的函数
Jul 13 Javascript
jquery中子元素和后代元素的区别示例介绍
Apr 02 Javascript
用javascript关闭本窗口技巧小结
Sep 05 Javascript
基于replaceChild制作简单的吞噬特效
Sep 21 Javascript
js实现不重复导入的方法
Mar 02 Javascript
深入理解vue路由的使用
Mar 24 Javascript
详解VueRouter进阶之导航钩子和路由元信息
Sep 13 Javascript
微信小程序自定义tabBar组件开发详解
Sep 24 Javascript
从0搭建vue-cli4脚手架
Jun 17 Javascript
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
微信小程序实现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作的文本留言本的例子(五)
2006/10/09 PHP
PHP运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
初识PHP
2014/09/28 PHP
PHP里8个鲜为人知的安全函数分析
2014/12/09 PHP
简单的php+mysql聊天室实现方法(附源码)
2016/01/05 PHP
php 如何设置一个严格控制过期时间的session
2017/05/05 PHP
CentOS7.0下安装PHP5.6.30服务的教程详解
2018/09/29 PHP
js获得地址栏?问号后参数的方法
2013/08/08 Javascript
JavaScript中实现单体模式分享
2015/01/29 Javascript
javascript生成随机数方法汇总
2015/11/12 Javascript
js省市联动效果完整实例代码
2015/12/09 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
2016/09/04 Javascript
详解js中Json的语法与格式
2016/11/22 Javascript
Angular.Js的自动化测试详解
2016/12/09 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
2017/01/16 Javascript
React BootStrap用户体验框架快速上手
2018/03/06 Javascript
Layui数据表格之获取表格中所有的数据方法
2018/08/20 Javascript
微信小程序实现单选功能
2018/10/30 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
2018/12/03 Javascript
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
vue视频播放插件vue-video-player的具体使用方法
2019/11/08 Javascript
Vue实现Layui的集成方法步骤
2020/04/10 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
Python编程实现微信企业号文本消息推送功能示例
2017/08/21 Python
python下载微信公众号相关文章
2019/02/26 Python
python PyQt5/Pyside2 按钮右击菜单实例代码
2019/08/17 Python
Python类中的魔法方法之 __slots__原理解析
2019/08/26 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
python语言time库和datetime库基本使用详解
2020/12/25 Python
使用Python webdriver图书馆抢座自动预约的正确方法
2021/03/04 Python
西雅图的买手店:Totokaelo
2019/10/19 全球购物
汽车广告策划方案
2014/05/31 职场文书
2015元旦主持词开场白和结束语
2014/12/14 职场文书
退休欢送会主持词
2015/07/01 职场文书
2019年教师节:送给所有老师的祝福语
2019/09/05 职场文书
一行代码python实现文件共享服务器
2021/04/22 Python