详解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 相关文章推荐
htm调用JS代码
Mar 15 Javascript
js cookies实现简单统计访问次数
Nov 24 Javascript
jQuery动态设置form表单的enctype值(实现代码)
Jul 04 Javascript
Javascript表格翻页效果实现思路及代码
Aug 23 Javascript
jquery-syntax动态语法着色示例代码
May 14 Javascript
Angular2从搭建环境到开发步骤详解
Oct 17 Javascript
原生js实现图片放大缩小计时器效果
Jan 20 Javascript
JS中图片压缩的方法小结
Nov 14 Javascript
JavaScript动态加载重复绑定问题
Apr 01 Javascript
实例详解带参数的 npm script
May 28 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
Aug 16 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
Nov 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使用exec shell命令注入的方法讲解
2013/11/12 PHP
php调整gif动画图片尺寸示例代码分享
2013/12/05 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
2009/12/04 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
2013/04/01 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
nodeJS代码实现计算交社保是否合适
2015/03/09 NodeJs
jQuery常用且重要方法汇总
2015/07/13 Javascript
基于jquery实现复选框全选,反选,全不选等功能
2015/10/16 Javascript
Jquery轮播效果实现过程解析
2016/03/30 Javascript
JavaScript每天必学之数组和对象部分
2016/09/17 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
2017/01/08 Javascript
jQuery插件版本冲突的处理方法分析
2017/01/16 Javascript
vue-cli如何快速构建vue项目
2017/04/26 Javascript
AngularJS常见过滤器用法实例总结
2017/07/06 Javascript
Angular4 中内置指令的基本用法
2017/07/31 Javascript
react中的ajax封装实例详解
2017/10/17 Javascript
layui中table表头样式修改方法
2018/08/15 Javascript
js 对象使用的小技巧实例分析
2019/11/08 Javascript
Element Tooltip 文字提示的使用示例
2020/07/26 Javascript
Python装饰器decorator用法实例
2014/11/10 Python
python3 对list中每个元素进行处理的方法
2018/06/29 Python
Python 20行简单实现有道在线翻译的详解
2019/05/15 Python
Python考拉兹猜想输出序列代码实践
2019/07/05 Python
python else语句在循环中的运用详解
2020/07/06 Python
Python迭代器协议及for循环工作机制详解
2020/07/14 Python
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
Sandro Paris美国官网:典雅别致的法国时尚服饰品牌
2017/12/26 全球购物
简述数据库的设计过程
2015/06/22 面试题
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上
2013/07/06 面试题
五一家具促销方案
2014/01/10 职场文书
高三英语教学反思
2014/01/13 职场文书
服装设计专业毕业生求职信
2014/04/09 职场文书
基层领导干部“四风”问题批评与自我批评
2014/09/23 职场文书
历史名人教你十五个读书方法,赶快Get起来!
2019/07/18 职场文书
使用kubeadm命令行工具创建kubernetes集群
2022/03/31 Servers