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 相关文章推荐
JS中剪贴板兼容性、判断复制成功或失败
Mar 09 Javascript
基于jquery的获取mouse坐标插件的实现代码
Apr 01 Javascript
javascript 模式设计之工厂模式详细说明
May 10 Javascript
js防止表单重复提交实现代码
Sep 05 Javascript
改进版通过Json对象实现深复制的方法
Oct 24 Javascript
jQuery使用技巧简单汇总
Apr 18 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
Feb 16 Javascript
JS获取短信验证码倒计时的实现代码
May 22 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
Aug 25 Javascript
js实现删除json中指定的元素
Sep 22 Javascript
详解Javascript实践中的命令模式
May 05 Javascript
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
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
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
Javascript中valueOf与toString区别浅析
2013/03/19 Javascript
javascript分页代码实例分享(js分页)
2013/12/13 Javascript
禁止IE用右键的JS代码
2013/12/30 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
2014/07/31 Javascript
JavaScript获取指定元素位置的方法
2015/04/08 Javascript
jQuery实现自动切换播放的经典滑动门效果
2015/09/12 Javascript
JavaScript代码性能优化总结篇
2016/05/15 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
2016/11/16 Javascript
Ajax验证用户名或昵称是否已被注册
2017/04/05 Javascript
Angular 表单控件示例代码
2017/06/26 Javascript
原生js封装运动框架的示例讲解
2017/10/01 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
2017/11/15 Javascript
JsChart组件使用详解
2018/03/04 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
2018/08/08 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
2018/08/09 Javascript
关于angular引入ng-zorro的问题浅析
2020/09/09 Javascript
如何在VUE中使用vue-awesome-swiper
2021/01/04 Vue.js
Python中运行并行任务技巧
2015/02/26 Python
详解python单例模式与metaclass
2016/01/15 Python
Python编程之列表操作实例详解【创建、使用、更新、删除】
2017/07/22 Python
Python实现的多线程同步与互斥锁功能示例
2017/11/30 Python
windows下搭建python scrapy爬虫框架步骤
2018/12/23 Python
python多线程下信号处理程序示例
2019/05/31 Python
python调用动态链接库的基本过程详解
2019/06/19 Python
如何将json数据转换为python数据
2020/09/04 Python
python 删除系统中的文件(按时间,大小,扩展名)
2020/11/19 Python
匡威比利时官网:Converse Belgium
2017/04/13 全球购物
加拿大快时尚零售商:Ardene
2018/02/14 全球购物
Vilebrequin美国官方网上商店:法国豪华泳装品牌
2020/02/22 全球购物
关于毕业的广播稿
2014/01/10 职场文书
医生见习报告范文
2014/11/03 职场文书
干货:如何写好工作总结报告!
2019/05/10 职场文书
redis 限制内存使用大小的实现
2021/05/08 Redis
5分钟教你docker安装启动redis全教程(全新方式)
2021/05/29 Redis
Oracle 触发器trigger使用案例
2022/02/24 Oracle