详解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 相关文章推荐
线路分流自动跳转代码;希望对大家有用!
Dec 02 Javascript
初学js插入节点appendChild insertBefore使用方法
Jul 04 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
Jun 15 Javascript
jquery浏览器滚动加载技术实现方案
Jun 03 Javascript
innerHTML在IE中报错解决方案
Dec 15 Javascript
node.js中的fs.truncate方法使用说明
Dec 15 Javascript
深入学习AngularJS中数据的双向绑定机制
Mar 04 Javascript
echarts饼图扇区添加点击事件的实例
Oct 16 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
May 23 Javascript
vue实现与安卓、IOS交互的方法
Nov 02 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
Nov 12 Javascript
jQuery实现放大镜案例
Oct 19 jQuery
微信小程序实现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脚本的10个技巧(2)
2006/10/09 PHP
mantis安装、配置和使用中的问题小结
2014/07/14 PHP
textContent在Firefox下与innerText等效的属性
2007/05/12 Javascript
学习JS面向对象成果 借国庆发布个最新作品与大家交流
2009/10/03 Javascript
页面调用单个swf文件,嵌套出多个方法。
2011/11/21 Javascript
关于JS中的闭包浅谈
2013/08/23 Javascript
利用进制转换压缩数字函数分享
2014/01/02 Javascript
js实现照片墙功能实例
2015/02/05 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
2016/02/17 Javascript
Backbone中View之间传值的学习心得
2016/08/09 Javascript
关于List.ToArray()方法的效率测试
2016/09/30 Javascript
Nodejs下用submit提交表单提示cannot post错误的解决方法
2016/11/21 NodeJs
js学习总结之DOM2兼容处理重复问题的解决方法
2017/07/27 Javascript
Bootstrap table使用方法记录
2017/08/23 Javascript
JavaScript 中的 this 简单规则
2017/09/19 Javascript
微信小程序获取手机号授权用户登录功能
2017/11/09 Javascript
详解vue-router导航守卫
2019/01/19 Javascript
Vue-CLI项目中路由传参的方式详解
2019/09/01 Javascript
[02:14]DOTA2英雄基础教程 修补匠
2013/12/23 DOTA
Python的Django框架中使用SQLAlchemy操作数据库的教程
2016/06/02 Python
Python实现抓取网页生成Excel文件的方法示例
2017/08/05 Python
python 3利用Dlib 19.7实现摄像头人脸检测特征点标定
2018/02/26 Python
python 对给定可迭代集合统计出现频率,并排序的方法
2018/10/18 Python
Python反爬虫技术之防止IP地址被封杀的讲解
2019/01/09 Python
python ---lambda匿名函数介绍
2019/03/13 Python
Python爬虫学习之翻译小程序
2019/07/30 Python
浅谈TensorFlow之稀疏张量表示
2020/06/30 Python
python 基于selectors库实现文件上传与下载
2020/12/31 Python
澳大利亚音乐商店:Bava’s Music City
2019/05/05 全球购物
UNOde50美国官网:西班牙珠宝品牌
2020/08/15 全球购物
前台文员我鉴定
2014/01/12 职场文书
学生个人自我鉴定
2014/03/26 职场文书
委托公证书范本
2014/04/03 职场文书
中学生逃课检讨书
2015/02/17 职场文书
行政介绍信范文
2015/05/04 职场文书
python疲劳驾驶困倦低头检测功能的实现
2022/04/04 Python