获取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 相关文章推荐
JavaScript 实现模态对话框 源代码大全
May 02 Javascript
Javascript实现的类似Google的Div拖动效果代码
Aug 09 Javascript
javascript SpiderMonkey中的函数序列化如何进行
Dec 05 Javascript
setinterval()与clearInterval()JS函数的调用方法
Jan 21 Javascript
举例讲解jQuery中可见性过滤选择器的使用
Apr 18 Javascript
简单了解JavaScript操作XPath的一些基本方法
Jun 03 Javascript
react.js CMS 删除功能的实现方法
Apr 17 Javascript
vue高德地图之玩转周边
Jun 16 Javascript
简单实现js上传文件功能
Aug 21 Javascript
谈谈JS中的!!
Dec 07 Javascript
webpack开发环境和生产环境的深入理解
Nov 08 Javascript
Vue源码解析之数组变异的实现
Dec 04 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新手上路(五)
2006/10/09 PHP
php中sprintf与printf函数用法区别解析
2014/02/17 PHP
php中session与cookie的比较
2015/01/27 PHP
PHP中关键字interface和implements详解
2017/06/14 PHP
JS event使用方法详解
2008/04/28 Javascript
jquery 查找select ,并触发事件的实现代码
2011/03/30 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
JS批量操作CSS属性详细解析
2013/12/16 Javascript
Javascript学习笔记之数组的构造函数
2014/11/23 Javascript
基于ajax实现文件上传并显示进度条
2015/08/03 Javascript
聊一聊JS中this的指向问题
2016/06/17 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
2017/01/17 Javascript
js实现PC端和移动端刮卡效果
2020/03/27 Javascript
AngularJS Toaster使用详解
2017/02/24 Javascript
JS实现颜色动态淡化效果
2017/03/06 Javascript
微信小程序日期时间选择器使用方法
2018/02/01 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
2019/01/27 jQuery
深入理解 JS 垃圾回收
2019/06/03 Javascript
JavaScript内置对象之Array的使用小结
2020/05/12 Javascript
Python读取视频的两种方法(imageio和cv2)
2018/04/15 Python
django连接mysql数据库及建表操作实例详解
2019/12/10 Python
关于jupyter打开之后不能直接跳转到浏览器的解决方式
2020/04/13 Python
Anaconda+spyder+pycharm的pytorch配置详解(GPU)
2020/10/18 Python
Jimmy Choo美国官网:周仰杰鞋子品牌
2018/06/08 全球购物
mysql_pconnect()和mysql_connect()有什么区别
2012/05/25 面试题
人民教师的自我评价分享
2014/02/21 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
师德师风建设整改措施思想汇报
2014/10/11 职场文书
2014幼儿教师个人工作总结
2014/12/03 职场文书
董事长岗位职责
2015/02/13 职场文书
退税申请报告怎么写
2015/05/18 职场文书
孝女彩金观后感
2015/06/10 职场文书
运动员代表致辞
2015/07/29 职场文书
幼儿园开学家长寄语(2016春季)
2015/12/03 职场文书
关于保护环境的建议书
2019/06/24 职场文书
Go本地测试解耦任务拆解及沟通详解Go本地测试的思路沟通的重要性总结
2022/06/21 Golang