详解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 相关文章推荐
解决jquery .ajax 在IE下卡死问题的解决方法
Oct 26 Javascript
再谈Jquery Ajax方法传递到action(补充)
May 12 Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 Javascript
微信小程序 教程之引用
Oct 18 Javascript
fullCalendar中文API官方文档
Feb 07 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
Jul 11 Javascript
代码详解javascript模块加载器
Mar 04 Javascript
JS文件中加载jquery.js的实例代码
May 05 jQuery
JS实现简单的抽奖转盘效果示例
Feb 16 Javascript
js定义类的方法示例【ES5与ES6】
Jul 30 Javascript
vuex actions异步修改状态的实例详解
Nov 06 Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 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下使用无限生命期Session的方法
2007/03/16 PHP
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
2007/01/09 Javascript
Div Select挡住的解决办法
2008/08/07 Javascript
关于jquery动态增减控件的一些想法和小插件
2010/08/01 Javascript
当鼠标移动时出现特效的JQuery代码
2013/11/08 Javascript
NodeJS url验证(url-valid)的使用方法
2013/11/18 NodeJs
Javascript高级技巧分享
2014/02/25 Javascript
js用闭包遍历树状数组的方法
2014/03/19 Javascript
jquery用data方法获取某个元素上的事件
2014/06/23 Javascript
JS实现的自定义右键菜单实例二则
2015/09/01 Javascript
javascript计时器编写过程与实现方法
2016/02/29 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
2016/09/26 Javascript
Webpack实现按需打包Lodash的几种方法详解
2017/05/08 Javascript
JavaScript创建对象的七种方式全面总结
2017/08/21 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
2018/01/31 Javascript
JS中的事件委托实例浅析
2018/03/22 Javascript
[53:52]OG vs EG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
用Python实现一个简单的能够上传下载的HTTP服务器
2015/05/05 Python
python 矢量数据转栅格数据代码实例
2019/09/30 Python
PyTorch的SoftMax交叉熵损失和梯度用法
2020/01/15 Python
python利用datetime模块计算程序运行时间问题
2020/02/20 Python
python爬取招聘要求等信息实例
2020/11/20 Python
python性能测试工具locust的使用
2020/12/28 Python
Django2.1.7 查询数据返回json格式的实现
2020/12/29 Python
CSS3的Flexbox布局的简明入门指南
2016/04/08 HTML / CSS
罗兰·穆雷官网:Roland Mouret
2018/09/28 全球购物
美国班级戒指、帽子和礼服、毕业产品、年鉴:Balfour
2018/11/01 全球购物
行政内勤岗位职责
2014/04/07 职场文书
煤矿安全生产责任书
2014/04/15 职场文书
《陈毅探母》教学反思
2014/05/01 职场文书
心理咨询承诺书
2014/05/20 职场文书
党员对照检查材料思想汇报
2014/09/16 职场文书
2019优秀干部竞聘演讲稿范文!
2019/07/02 职场文书
goland 清除所有的默认设置操作
2021/04/28 Golang
python turtle绘图
2022/05/04 Python