详解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 框架小结 个人工作经验
Jun 13 Javascript
javascript 触发HTML元素绑定的函数
Sep 11 Javascript
jQuery之字体大小的设置方法
Feb 27 Javascript
JavaScript合并两个数组并去除重复项的方法
Jun 13 Javascript
Angular.js回顾ng-app和ng-model使用技巧
Apr 26 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
Aug 01 Javascript
BootStrap select2 动态改变值的方法
Feb 10 Javascript
js实现打地鼠小游戏
Feb 13 Javascript
微信小程序中的swiper组件详解
Apr 14 Javascript
Map.vue基于百度地图组件重构笔记分享
Apr 17 Javascript
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
webpack打包node.js后端项目的方法
Mar 10 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
上传文件先创建目录 再上传到目录里面去
2010/12/29 PHP
php设计模式 Prototype (原型模式)代码
2011/06/26 PHP
强制PHP命令行脚本单进程运行的方法
2014/04/15 PHP
PHP+MySQL删除操作实例
2015/01/21 PHP
PHP面向对象程序设计(OOP)之方法重写(override)操作示例
2018/12/21 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
2007/03/10 Javascript
js 距离某一时间点时间是多少实现代码
2013/10/14 Javascript
js的正则test,match,exec详细解析
2014/01/29 Javascript
jQuery获取当前对象标签名称的方法
2014/02/07 Javascript
node.js中的fs.rmdirSync方法使用说明
2014/12/16 Javascript
js获取域名的方法
2015/01/27 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
2015/09/08 Javascript
javascript学习指南之回调问题
2016/04/23 Javascript
js学习阶段总结(必看篇)
2016/06/16 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
JS中的作用域链
2017/03/01 Javascript
了解VUE的render函数的使用
2017/06/08 Javascript
Angularjs中数据绑定的实例详解
2017/08/25 Javascript
微信小程序实现折叠面板
2018/01/31 Javascript
微信小程序实现YDUI的ScrollNav组件
2018/02/02 Javascript
js统计页面上每个标签的数量实例代码
2018/05/29 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
2018/09/25 Javascript
node.js连接mysql与基本用法示例
2019/01/05 Javascript
Python统计列表中的重复项出现的次数的方法
2014/08/18 Python
Python制作Windows系统服务
2017/03/25 Python
利用python微信库itchat实现微信自动回复功能
2017/05/18 Python
Python设计模式之观察者模式简单示例
2018/01/10 Python
Python基础教程之异常详解
2019/01/10 Python
Django用户认证系统如何实现自定义
2020/11/12 Python
大学四年个人自我小结
2014/03/05 职场文书
教师党员岗位承诺书
2014/05/29 职场文书
土地租赁意向书
2014/07/30 职场文书
2015年保洁员工作总结
2015/05/04 职场文书
环保宣传语大全
2015/07/13 职场文书
idea下配置tomcat避坑详解
2022/04/12 Servers