获取layer.open弹出层的返回值方法


Posted in Javascript onAugust 20, 2018

正在开发的车联网项目用到了layer API。当我在开发“新建电子围栏”的时候需要弹出地图,用户在地图中画一个区域,最后将这个弹出层的数据返回给原页面。下面是我的实现过:程:

触发弹出层的代码:

layer.open({
     type: 2,
     title: "设置围栏",
     shadeClose: true,
     shade: 0.4,
     area: ['90%', '90%'],
     content: "/ElectronicFence/Map?id=" + id + "&shapeType=" + shapeType,
     btn: ['确定','关闭'],
     yes: function(index){
      //当点击‘确定'按钮的时候,获取弹出层返回的值
      var res = window["layui-layer-iframe" + index].callbackdata();
      //打印返回的值,看是否有我们想返回的值。
      console.log(res);
      //最后关闭弹出层
      layer.close(index);
     },
     cancel: function(){
      //右上角关闭回调
     }
    });

注意:

var res = window["layui-layer-iframe" + index].callbackdata();

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

弹出层中定义返回值的函数:

<script type="text/javascript">
  var map = new AMap.Map("container", {
   resizeEnable: true
  });
  //在地图中添加MouseTool插件
  var mouseTool = new AMap.MouseTool(map);
  AMap.event.addDomListener(document.getElementById('point'), 'click', function () {
   mouseTool.marker({ offset: new AMap.Pixel(-14, -11) });
  }, false);
  AMap.event.addDomListener(document.getElementById('line'), 'click', function () {
   mouseTool.polyline();
  }, false);
  AMap.event.addDomListener(document.getElementById('polygon'), 'click', function () {
   mouseTool.polygon();
  }, false);


  var callbackdata = function () {
   var data = {
    username: 'zhangfj'
   };
   return data;
  }
 </script>

上面的代码就是弹出层里面的JavaScript代码,里面定义了函数'callbackdata' 用来返回值给调用弹出层的页面。

当我们点击弹出层的“确定”按钮的时候,就可以通过'callbackdata'函数获取弹出层的返回值:

F12 查看console.log(res);的输出结果:

获取layer.open弹出层的返回值方法

以上这篇获取layer.open弹出层的返回值方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于jQuery的inArray 方法介绍
Oct 08 Javascript
可自定义速度的js图片无缝滚动示例分享
Jan 20 Javascript
Javascript基础教程之数据类型 (字符串 String)
Jan 18 Javascript
详解AngularJS中的filter过滤器用法
Jan 04 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
Nov 23 Javascript
jQuery居中元素scrollleft计算方法示例
Jan 16 Javascript
简单介绍react redux的中间件的使用
Apr 06 Javascript
vue系列之requireJs中引入vue-router的方法
Jul 18 Javascript
微信小程序实现底部导航
Nov 05 Javascript
Nuxt.js 数据双向绑定的实现
Feb 17 Javascript
vue如何限制只能输入正负数及小数
Jul 04 Javascript
Vue 中使用富文本编译器wangEditor3的方法
Sep 26 Javascript
react.js组件实现拖拽复制和可排序的示例代码
Aug 20 #Javascript
layui弹出层按钮提交iframe表单的方法
Aug 20 #Javascript
详解如何在Vue里建立长按指令
Aug 20 #Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
Aug 20 #Javascript
Angular6 写一个简单的Select组件示例
Aug 20 #Javascript
Layer弹出层动态获取数据的方法
Aug 20 #Javascript
layui 给数据表格加序号的方法
Aug 20 #Javascript
You might like
Uncaught exception com_exception with message Failed to create COM object
2012/01/11 PHP
基于magic_quotes_gpc与magic_quotes_runtime的区别与使用介绍
2013/04/22 PHP
奉献出一个封装的curl函数 便于调用(抓数据专用)
2013/07/22 PHP
php 伪静态之IIS篇
2014/06/02 PHP
Yii2使用swiftmailer发送邮件的方法
2016/05/03 PHP
Laravel如何创建服务器提供者实例代码
2019/04/15 PHP
PHP7使用ODBC连接SQL Server2008 R2数据库示例【基于thinkPHP5.1框架】
2019/05/06 PHP
一个高效的JavaScript压缩工具下载集合
2007/03/06 Javascript
JavaScript 自动完成脚本整理(33个)
2009/10/20 Javascript
jQuery+css实现图片滚动效果(附源码)
2013/03/18 Javascript
JavaScript定时器详解及实例
2013/08/01 Javascript
Javascript中匿名函数的多种调用方式总结
2013/12/06 Javascript
javascript 3d 逐侦产品展示(核心精简)
2014/03/26 Javascript
JavaScript避免代码的重复执行经验技巧分享
2014/04/17 Javascript
javascript中的return和闭包函数浅析
2014/06/06 Javascript
jQuery中index()的用法分析
2014/09/05 Javascript
js弹出对话框方式小结
2015/11/17 Javascript
深入浅析NodeJs并发异步的回调处理
2015/12/21 NodeJs
jQuery侧边栏实现代码
2016/05/06 Javascript
不同js异步函数同步的实现方法
2016/05/28 Javascript
纯js仿淘宝京东商品放大镜功能
2017/03/02 Javascript
vue如何实现observer和watcher源码解析
2017/03/09 Javascript
python list使用示例 list中找连续的数字
2014/01/27 Python
在ironpython中利用装饰器执行SQL操作的例子
2015/05/02 Python
Python制作简易注册登录系统
2016/12/15 Python
python+opencv实现的简单人脸识别代码示例
2017/11/14 Python
理想高通滤波实现Python opencv示例
2019/01/30 Python
详解python配置虚拟环境
2019/04/08 Python
pandas.cut具体使用总结
2019/06/24 Python
pycharm无法安装第三方库的问题及解决方法以scrapy为例(图解)
2020/05/09 Python
Crocs波兰官方商店:女鞋、男鞋、童鞋、洞洞鞋
2019/10/08 全球购物
网络安全类面试题
2015/08/01 面试题
三方合作协议书范本
2014/04/18 职场文书
优秀的应届生自荐信
2014/05/23 职场文书
2016幼儿园教师年度考核评语
2015/12/01 职场文书
关于Python OS模块常用文件/目录函数详解
2021/07/01 Python