详解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 相关文章推荐
关于document.cookie的使用javascript
Oct 29 Javascript
百度移动版的url编码解码示例
Apr 29 Javascript
JavaScript函数使用的基本教程
Jun 04 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
Aug 10 Javascript
jQuery获取table行数并输出单元格内容的实现方法
Jun 30 Javascript
AngularJS延迟加载html template
Jul 27 Javascript
javascript构造函数以及原型对象的理解
Jan 13 Javascript
详解Vue2.0里过滤器容易踩到的坑
Jun 01 Javascript
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
JavaScript实现修改伪类样式
Nov 27 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
Jan 26 Javascript
jQuery实现点击滚动到指定元素上的方法分析
Mar 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大批量插入数据库的3种方法和速度对比
2014/07/08 PHP
PHP使用curl_multi_select解决curl_multi网页假死问题的方法
2018/08/15 PHP
实现php删除链表中重复的结点
2018/09/27 PHP
javascript 函数速查表
2010/02/07 Javascript
js创建子窗口并且回传值示例代码
2013/07/02 Javascript
ExtJS4中使用mixins实现多继承示例
2013/12/03 Javascript
jquery实现右键菜单插件
2015/03/29 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
2015/12/18 Javascript
基于JS代码实现图片在页面中旋转效果
2016/06/16 Javascript
JavaScript实现移动端滑动选择日期功能
2016/06/21 Javascript
微信小程序 WebSocket详解及应用
2017/01/21 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
2017/03/31 Javascript
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
Node层模拟实现multipart表单的文件上传示例
2018/01/02 Javascript
JavaScript中Object基础内部方法图
2018/02/05 Javascript
深入浅析javascript函数中with
2018/10/28 Javascript
深入理解nodejs搭建静态服务器(实现命令行)
2019/02/05 NodeJs
vue2.0实现的tab标签切换效果(内容可自定义)示例
2019/02/11 Javascript
如何利用ES6进行Promise封装总结
2019/02/11 Javascript
Python中xrange与yield的用法实例分析
2017/12/26 Python
详解Python中where()函数的用法
2018/03/27 Python
Python输出\u编码将其转换成中文的实例
2018/12/15 Python
Python面向对象程序设计类变量与成员变量、类方法与成员方法用法分析
2019/04/12 Python
在DELPHI中调用存储过程和使用内嵌SQL哪种方式更好
2016/11/22 面试题
主持人演讲稿范文
2013/12/28 职场文书
初中生物教学反思
2014/01/10 职场文书
六五普法规划实施方案
2014/03/21 职场文书
业务内勤岗位职责
2014/04/30 职场文书
会计学专业自荐信
2014/06/25 职场文书
2016新年问候语大全
2015/11/11 职场文书
五年级数学教学反思
2016/02/16 职场文书
小学语文课《掌声》教学反思
2016/03/03 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书
nginx内存池源码解析
2021/11/20 Servers
Win Server2016远程桌面如何允许多用户同时登录
2022/06/10 Servers
openEuler 搭建java开发环境的详细过程
2022/06/10 Servers