详解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中instanceof与typeof运算符的用法及区别详细解析
Nov 19 Javascript
js中window.open打开一个新的页面
Aug 10 Javascript
详解JavaScript的流程控制语句
Nov 30 Javascript
纯JS代码实现一键分享功能
Apr 20 Javascript
详解Angular.js的$q.defer()服务异步处理
Nov 06 Javascript
基于vue展开收起动画的示例代码
Jul 05 Javascript
微信小程序实现点赞、取消点赞功能
Nov 02 Javascript
javascript对HTML字符转义与反转义
Dec 13 Javascript
富文本编辑器vue2-editor实现全屏功能
May 26 Javascript
vue服务端渲染操作简单入门实例分析
Aug 28 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
Sep 24 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
Feb 06 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的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
PHP中date()日期函数有关参数整理
2011/07/19 PHP
PHP hebrev()函数用法讲解
2019/02/21 PHP
Yii使用EasyWechat实现小程序获取用户的openID的方法
2020/04/29 PHP
音乐播放用的的几个函数
2006/09/07 Javascript
js textarea自动增高并隐藏滚动条
2009/12/16 Javascript
jquery $.fn $.fx是什么意思有什么用
2013/11/04 Javascript
jquery获取checkbox的值并post提交
2015/01/14 Javascript
JavaScript生成二维码图片小结
2015/12/27 Javascript
Vue.js表单控件实践
2016/10/27 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
2017/01/19 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
2017/04/13 Javascript
微信小程序 登录的简单实现
2017/04/19 Javascript
protractor的安装与基本使用教程
2017/07/07 Javascript
javascript中的replace函数(带注释demo)
2018/01/07 Javascript
layui弹出层按钮提交iframe表单的方法
2018/08/20 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
2019/09/27 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
2020/10/29 Javascript
[05:36]DOTA2 2015国际邀请赛中国区预选赛第四日TOP10
2015/05/29 DOTA
python判断windows系统是32位还是64位的方法
2015/05/11 Python
CentOS6.5设置Django开发环境
2016/10/13 Python
python+django+sql学生信息管理后台开发
2018/01/11 Python
在Python 中实现图片加框和加字的方法
2019/01/26 Python
详解用Python练习画个美队盾牌
2019/03/23 Python
10 行Python 代码实现 AI 目标检测技术【推荐】
2019/06/14 Python
Pyqt清空某一个QTreeewidgetItem下的所有分支方法
2019/06/17 Python
Django 开发调试工具 Django-debug-toolbar使用详解
2019/07/23 Python
django使用xadmin的全局配置详解
2019/11/15 Python
keras Lambda自定义层实现数据的切片方式,Lambda传参数
2020/06/11 Python
python中tab键是什么意思
2020/06/18 Python
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
linux面试题参考答案(6)
2016/06/23 面试题
市级文明单位申报材料
2014/05/07 职场文书
关于环保的标语
2014/06/13 职场文书
建筑工程材料员岗位职责
2015/04/11 职场文书
PyTorch 如何自动计算梯度
2021/05/23 Python