layui 弹出层回调获取弹出层数据的例子


Posted in Javascript onSeptember 02, 2019

如下所示:

// 弹出楼栋负责人信息页面
   layer.open({
   type: 2,
   title:'请选择楼栋负责人',
   maxmin: false,
   area: ['60%', '80%'],
   offset: '0px',
   content: '${ctx}/life/houserInsertion/headBuildingInfo?pkProject='+pkProject,
   btn: ['确定','关闭'],
    yes: function(index){
    //当点击‘确定'按钮的时候,获取弹出层返回的值
    var res = window["layui-layer-iframe" + index].callbackdata();
    //打印返回的值,看是否有我们想返回的值。
    console.log(res);
    for (var i = 0; i < res.length; i++) {
    var html = "<div class='text' value='' style='visibility: visible;'>" +
     "<p>" + "<span class='responsibleName' value=" + res[i].value + ">" + res[i].title + "</span>" +
     "<a class='close_btn' οnclick='remove(this)'>" + 'X' + "</a>" + "</p>"
    "</div>"
    $("#responsibleName_id").append(html);
    
    }
    //最后关闭弹出层
    layer.close(index);
   }
   });

// 关键代码var res = window["layui-layer-iframe" + index].callbackdata();

这行代码中‘callbackdata'是弹出层里面定义的函数。也许我们知道了什么!这个函数的作用就是返回值。
弹出层定义callbackdata函数

var callbackdata = function () {
  var data = {
  username: 'zhangfj',
  age:12,
  address:'广州'
  };
  return data;
 }

注意:下图是弹出层回调数据

layui 弹出层回调获取弹出层数据的例子

以上这篇layui 弹出层回调获取弹出层数据的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Array.prototype 的泛型应用分析
Apr 30 Javascript
分页栏的web标准实现
Nov 01 Javascript
学习JavaScript设计模式(继承)
Nov 26 Javascript
基于javascript实现彩票随机数生成(简单版)
Apr 17 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
Feb 23 Javascript
JavaScript 完成注册页面表单校验的实例
Aug 19 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
Oct 11 Javascript
vue.js中toast用法及使用toast弹框的实例代码
Aug 27 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
Sep 13 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
Dec 13 Javascript
vue实现滑动超出指定距离回顶部功能
Jul 31 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
Mar 06 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
Sep 01 #Javascript
Vue使用mixin分发组件的可复用功能
Sep 01 #Javascript
JavaScript页面加载事件实例讲解
Sep 01 #Javascript
Node.js安装详细步骤教程(Windows版)详解
Sep 01 #Javascript
vue组件命名和props命名代码详解
Sep 01 #Javascript
Vue-CLI项目中路由传参的方式详解
Sep 01 #Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
Sep 01 #Javascript
You might like
基于flush()不能按顺序输出时的解决办法
2013/06/29 PHP
php过滤HTML标签、属性等正则表达式汇总
2014/09/22 PHP
PHP中你应该知道的require()文件包含的正确用法
2015/06/12 PHP
php 流程控制switch的简单实例
2016/06/07 PHP
php转换上传word文件为PDF的方法【基于COM组件】
2019/06/10 PHP
PHP进阶学习之Geo的地图定位算法详解
2019/06/19 PHP
关于jquery的多个选择器的使用示例
2013/10/18 Javascript
js document.write()使用介绍
2014/02/21 Javascript
JS动态修改iframe内嵌网页地址的方法
2015/04/01 Javascript
js验证真实姓名与身份证号是否匹配
2015/10/13 Javascript
js实现继承的5种方式
2015/12/01 Javascript
Jil,高效的json序列化和反序列化库
2017/02/15 Javascript
详解JavaScript调用栈、尾递归和手动优化
2017/06/03 Javascript
Vue2.0权限树组件实现代码
2017/08/29 Javascript
JavaScript中如何判断一个值的类型
2017/09/15 Javascript
vue-prop父组件向子组件进行传值的方法
2018/03/01 Javascript
ES6 系列之 Generator 的自动执行的方法示例
2018/10/19 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
2019/03/13 Javascript
vue实现商城秒杀倒计时功能
2019/12/12 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
2020/06/19 Javascript
vue如何使用rem适配
2021/02/06 Vue.js
[02:06]DOTA2肉山黑名单魔法终结者 敌法师中文配音鉴赏
2013/06/17 DOTA
python实现封装得到virustotal扫描结果
2014/10/05 Python
解决matplotlib库show()方法不显示图片的问题
2018/05/24 Python
老生常谈python中的重载
2018/11/11 Python
使用python PIL库实现简单验证码的去噪方法步骤
2019/05/10 Python
在python中将list分段并保存为array类型的方法
2019/07/15 Python
python2.7的flask框架之引用js&amp;css等静态文件的实现方法
2019/08/22 Python
通过实例解析Python return运行原理
2020/03/04 Python
PyCharm 在Windows的有用快捷键详解
2020/04/07 Python
多视角3D逼真HTML5水波动画
2016/03/03 HTML / CSS
美国精品家居用品网站:US-Mattress
2016/08/24 全球购物
波兰在线儿童和婴儿用品零售商:pinkorblue
2019/06/29 全球购物
趣味体育活动方案
2014/02/08 职场文书
庆六一开幕词
2015/01/29 职场文书
全面盘点MySQL中的那些重要日志文件
2021/11/27 MySQL