详解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 11 Javascript
做好七件事帮你提升jQuery的性能
Feb 06 Javascript
原生js实现日期联动
Jan 12 Javascript
js实现当前输入框高亮显示的方法
Aug 19 Javascript
jQuery 3.0十大新特性最终版发布
Jul 14 Javascript
javascript笔记之匿名函数和闭包
Feb 06 Javascript
JavaScript如何获取到导航条中HTTP信息
Oct 10 Javascript
在Vant的基础上封装下拉日期控件的代码示例
Dec 05 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
Sep 20 Javascript
js实现二级联动简单实例
Jan 11 Javascript
JavaScript前端实现压缩图片功能
Mar 06 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
Nov 05 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常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
PHP的Laravel框架中使用AdminLTE模板来编写网站后台界面
2016/03/21 PHP
php parse_str() 函数的定义和用法
2016/05/23 PHP
利用php抓取蜘蛛爬虫痕迹的示例代码
2016/09/30 PHP
PHP实现字符串翻转功能的方法【递归与循环算法】
2017/11/03 PHP
JS完成代码前最好对其做5件事
2013/04/07 Javascript
JavaScript控制按钮可用或不可用的方法
2015/04/03 Javascript
深入理解Ajax的get和post请求
2016/06/02 Javascript
js制作网站首页图片轮播特效代码
2016/08/30 Javascript
如何实现json数据可视化详解
2016/11/24 Javascript
基于jquery实现多选下拉列表
2017/08/02 jQuery
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
2017/09/06 Javascript
微信小程序如何自定义table组件
2019/06/29 Javascript
python使用scrapy解析js示例
2014/01/23 Python
Python中使用SAX解析xml实例
2014/11/21 Python
python编码总结(编码类型、格式、转码)
2016/07/01 Python
python操作excel文件并输出txt文件的实例
2018/07/10 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
详解如何从TensorFlow的mnist数据集导出手写体数字图片
2019/08/05 Python
python 实现目录复制的三种小结
2019/12/04 Python
python开发实例之Python的Twisted框架中Deferred对象的详细用法与实例
2020/03/19 Python
Python之Sklearn使用入门教程
2021/02/19 Python
CSS3 animation实现简易幻灯片轮播特效
2016/09/27 HTML / CSS
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
2018/02/07 HTML / CSS
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
2014/04/10 HTML / CSS
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
教师岗位职责范本
2013/12/29 职场文书
女方回门宴答谢词
2014/01/14 职场文书
岗位职责风险点
2014/03/12 职场文书
新学期开学标语
2014/06/30 职场文书
学生乘坐校车安全责任书
2015/05/11 职场文书
2016优秀大学生个人事迹材料范文
2016/03/01 职场文书
Python Pandas pandas.read_sql_query函数实例用法分析
2021/06/21 Python
python中使用 unittest.TestCase单元测试的用例详解
2021/08/30 Python
Python函数式编程中itertools模块详解
2021/09/15 Python
优化Mysql查询的示例
2022/04/26 MySQL