获取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中绑定事件的命名空间详解
Apr 05 Javascript
JS文本获得焦点清除文本文字的示例代码
Jan 13 Javascript
javascript递归回溯法解八皇后问题
Apr 22 Javascript
jquery不常用方法汇总
Jul 26 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
Aug 05 Javascript
微信小程序 action-sheet底部菜单详解
Oct 27 Javascript
最好用的Bootstrap fileinput.js文件上传组件
Dec 12 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
Dec 20 Javascript
JavaScript轮播停留效果的实现思路
May 24 Javascript
JavaScript箭头函数中的this详解
Jun 19 Javascript
ES6学习笔记之let与const用法实例分析
Jan 22 Javascript
解决vue scoped scss 无效的问题
Sep 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程序的php代码
2008/04/07 PHP
Laravel5.1自定义500错误页面示例
2016/10/09 PHP
PHP实现的文件上传类与用法详解
2017/07/05 PHP
JavaScript中的运算符种类及其规则介绍
2013/09/26 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
2014/03/05 Javascript
用jquery仿做发微博功能示例
2014/04/18 Javascript
什么是Node.js?Node.js详细介绍
2014/06/01 Javascript
封装了一个支持匿名函数的Javascript事件监听器
2014/06/05 Javascript
javascript对象的创建和访问
2016/03/08 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
2016/06/10 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
2016/11/10 Javascript
React Native时间转换格式工具类分享
2017/10/24 Javascript
详解vue-admin和后端(flask)分离结合的例子
2018/02/12 Javascript
Node.js操作系统OS模块用法分析
2019/01/04 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
2020/08/26 Javascript
Python sys.argv用法实例
2015/05/28 Python
TensorFlow在MAC环境下的安装及环境搭建
2017/11/14 Python
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
浅谈python 导入模块和解决文件句柄找不到问题
2018/12/15 Python
关于pytorch中全连接神经网络搭建两种模式详解
2020/01/14 Python
python实现人机猜拳小游戏
2020/02/03 Python
Python获取对象属性的几种方式小结
2020/03/12 Python
python操作toml文件的示例代码
2020/11/27 Python
一家专门做特卖的网站:唯品会
2016/10/09 全球购物
香港时尚女装购物网站:ZAFUL
2017/07/19 全球购物
Omio美国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/08 全球购物
Ego Shoes官网:英国时髦鞋类品牌
2020/10/19 全球购物
应届生个人求职信模板
2013/11/26 职场文书
班主任工作年限证明
2014/01/12 职场文书
爱我中华演讲稿
2014/05/20 职场文书
初中生旷课检讨书范文
2014/10/06 职场文书
2015年学校心理健康教育工作总结
2015/05/11 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
致运动员加油稿
2015/07/21 职场文书
授权协议书范本(3篇)
2019/10/15 职场文书
Oracle 区块链表创建过程详解
2021/05/15 Oracle