获取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 相关文章推荐
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
Jan 22 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
May 15 Javascript
IE中的File域无法清空使用jQuery重设File域
Apr 24 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
Aug 27 Javascript
Javascript闭包与函数柯里化浅析
Jun 22 Javascript
JSON与String互转的实现方法(Javascript)
Sep 27 Javascript
详解Vue中添加过渡效果
Mar 20 Javascript
JavaScript实现简单图片轮播效果
Aug 21 Javascript
react redux入门示例
Apr 19 Javascript
axios取消请求的实践记录分享
Sep 26 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
jQuery实现视频展示效果
May 30 jQuery
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
文件上传的实现
2006/10/09 PHP
php array_search() 函数使用
2010/04/13 PHP
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
简单说说PHP优化那些事(经验分享)
2014/11/27 PHP
php选择排序法实现数组排序实例分析
2015/02/16 PHP
Prototype使用指南之ajax
2007/01/10 Javascript
JS backgroundImage控制
2009/05/19 Javascript
js输出列表实现代码
2010/09/12 Javascript
菜鸟javascript基础资料整理3 正则
2010/12/06 Javascript
jQuery中创建实例与原型继承揭秘
2011/12/21 Javascript
JS关键字球状旋转效果的实例代码
2013/11/29 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
2014/06/05 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
2016/01/19 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
2016/06/14 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
2016/12/26 Javascript
详解PHP中pathinfo()函数导致的安全问题
2017/01/05 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
2017/01/17 Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
2017/04/01 Javascript
打造通用的匀速运动框架(实例讲解)
2017/10/17 Javascript
vue watch关于对象内的属性监听
2019/04/22 Javascript
vue+elementUI实现表格关键字筛选高亮
2020/10/26 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
python中精确输出JSON浮点数的方法
2014/04/18 Python
python存储16bit和32bit图像的实例
2018/12/05 Python
Python unittest基本使用方法代码实例
2020/06/29 Python
Python Mock模块原理及使用方法详解
2020/07/07 Python
五个2015 年最佳HTML5 框架
2015/11/11 HTML / CSS
HTML5+lufylegend实现游戏中的卷轴
2016/02/29 HTML / CSS
Europcar英国:英国汽车和货车租赁
2017/01/21 全球购物
Paul’s Boutique官网:英国时尚手袋品牌
2018/03/31 全球购物
竞选班长演讲稿
2013/12/30 职场文书
简历自我评价怎么写呢?
2014/01/06 职场文书
软环境建设心得体会
2014/09/09 职场文书
授权委托书范本(单位)
2014/09/28 职场文书
授权委托书
2015/01/28 职场文书
Tomcat安装使用及部署Web项目的3种方法汇总
2022/08/14 Servers