获取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的ajax基础上的超强GridView展示
Sep 18 Javascript
基于jquery的无刷新分页技术
Jun 11 Javascript
关于跨站脚本攻击问题
Dec 22 Javascript
jquery实现滑动图片自己测试的例子
Nov 05 Javascript
使用jquery.upload.js实现异步上传示例代码
Jul 29 Javascript
JavaScript中实现最高效的数组乱序方法
Oct 11 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
Sep 09 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
Sep 01 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
vue 实现搜索的结果页面支持全选与取消全选功能
May 10 Javascript
js模拟F11页面全屏显示
Sep 17 Javascript
JavaScript字符和ASCII实现互相转换
Jun 03 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
PHP脚本的10个技巧(3)
2006/10/09 PHP
如何提高MYSQL数据库的查询统计速度 select 索引应用
2007/04/11 PHP
PHP递归调用的小技巧讲解
2013/02/19 PHP
改写函数实现PHP二维/三维数组转字符串
2013/09/13 PHP
支持中文的PHP按字符串长度分割成数组代码
2015/05/17 PHP
Yii控制器中操作视图js的方法
2016/07/04 PHP
php如何把表单内容提交到数据库
2019/07/08 PHP
很可爱的输入框
2008/08/03 Javascript
javascript 实现键盘上下左右功能的小例子
2013/09/15 Javascript
Jquery AJAX POST与GET之间的区别
2013/11/14 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
2015/06/25 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
2015/08/24 Javascript
JS模拟简易滚动条效果代码(附demo源码)
2016/04/05 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
2016/12/07 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
2017/02/22 Javascript
vue中实现在外部调用methods的方法(推荐)
2018/02/08 Javascript
JS加密插件CryptoJS实现的Base64加密示例
2020/08/16 Javascript
微信小程序手机号码验证功能的实例代码
2018/08/28 Javascript
VUE中setTimeout和setInterval自动销毁案例
2020/09/07 Javascript
[49:07]VGJ.T vs Optic Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
两个命令把 Vim 打造成 Python IDE的方法
2016/03/20 Python
python实现将excel文件转化成CSV格式
2018/03/22 Python
python random从集合中随机选择元素的方法
2019/01/23 Python
python3反转字符串的3种方法(小结)
2019/11/07 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
Python计算机视觉里的IOU计算实例
2020/01/17 Python
pandas和spark dataframe互相转换实例详解
2020/02/18 Python
通过Python扫描代码关键字并进行预警的实现方法
2020/05/24 Python
移动端Html5中百度地图的点击事件
2019/01/31 HTML / CSS
美国中小型企业领先的办公家具供应商:Office Designs
2016/11/26 全球购物
秋季婚礼证婚词
2014/01/11 职场文书
大学同学聚会邀请函
2014/01/19 职场文书
祖国在我心中的演讲稿
2014/05/04 职场文书
考博专家推荐信
2014/05/10 职场文书
我的中国梦演讲稿初中篇
2014/08/19 职场文书
基于Redis位图实现用户签到功能
2021/05/08 Redis