详解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 相关文章推荐
网站页面自动跳转实现方法PHP、JSP(下)
Aug 01 Javascript
基于jQuery实现下拉框
Nov 24 Javascript
Javascript优化技巧之短路表达式详细介绍
Mar 27 Javascript
Jquery实现纵向横向菜单
Jan 24 Javascript
浅谈JavaScript的全局变量与局部变量
Jun 10 Javascript
Node实战之不同环境下配置文件使用教程
Jan 02 Javascript
浅谈Vue网络请求之interceptors实际应用
Feb 28 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
Oct 30 Javascript
使用javascript做时间倒数读秒功能的实例
Jan 23 Javascript
JavaScript工具库之Lodash详解
Jun 15 Javascript
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
基于VUE实现简单的学生信息管理系统
Jan 13 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选择排序法实现数组排序实例分析
2015/02/16 PHP
Yii实现Command任务处理的方法详解
2016/07/14 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
jquery tools 系列 scrollable学习
2009/09/06 Javascript
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
javascript奇异的arguments分析
2010/10/20 Javascript
Jquery下attr和removeAttr的使用方法
2010/12/28 Javascript
Jquery提交表单 Form.js官方插件介绍
2012/03/01 Javascript
JavaScript中的substr()方法使用详解
2015/06/06 Javascript
js实现温度计时间样式代码分享
2015/08/21 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
2015/11/26 Javascript
JS中改变this指向的方法(call和apply、bind)
2016/03/26 Javascript
jQuery 常用代码集锦(必看篇)
2016/05/16 Javascript
详解使用Next.js构建服务端渲染应用
2018/07/10 Javascript
layui 实现table翻页滚动条位置保持不变的例子
2019/09/05 Javascript
vue 实现input表单元素的disabled示例
2019/10/28 Javascript
WebStorm中如何将自己的代码上传到github示例详解
2020/10/28 Javascript
python基础教程之Hello World!
2014/08/29 Python
python利用pandas将excel文件转换为txt文件的方法
2018/10/23 Python
基于OpenCV python3实现证件照换背景的方法
2019/03/22 Python
Python实现EXCEL表格的排序功能示例
2019/06/25 Python
关于PyTorch源码解读之torchvision.models
2019/08/17 Python
Python实现图片识别加翻译功能
2019/12/26 Python
使用python将微信image下.dat文件解密为.png的方法
2020/11/30 Python
Django与AJAX实现网页动态数据显示的示例代码
2021/02/24 Python
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
2018/02/01 HTML / CSS
W Concept美国:精选全球独立设计师
2017/02/22 全球购物
东南亚排名第一的服务市场:kaodim
2019/03/28 全球购物
英国旅行箱包和行李箱购物网站:Travel Luggage & Cabin Bags
2019/08/26 全球购物
学校安全教育制度
2014/01/31 职场文书
节能减耗标语
2014/06/21 职场文书
大学运动会加油稿200字(5篇)
2014/09/27 职场文书
白酒代理协议书范本
2014/10/26 职场文书
大学体育课感想
2015/08/10 职场文书
Golang实现AES对称加密的过程详解
2021/05/20 Golang
Windows下用Nginx配置https服务器及反向代理的问题
2021/09/25 Servers