移动端报表JS开发示例--获取定位

简介:

上次分享了移动端报表JS开发的系统概念,后来我又回去摸索了一些案例。之前接触到的FineReport的APP客户端可以用来打卡签到,就好奇研究了以下,这次就来聊一聊报表移动端开发如何实现定位功能。

1. 解决思路

在用FineReport设计模板的时候添加一个按钮控件,点击该按钮的时候,获取当前地理位置,并将该位置信息复制给某个单元格,最后在客户端填报当前模板即可。

2. 示例

实现如下图所示效果,点击地理位置按钮获取当前位置与当前时间,并显示在下方对应的单元格中:

2.1 模板制作


打开设计器,新建一张模板,按照如下图所示样式设计模板,其中E2单元格为按钮控件,控件名称为地理位置,C5为下拉框控件,E5为时间控件:

2.2 获取当前地理位置


获取当前地理位置有两种方式,一个是点击按钮获取地理位置,一个是直接打开模板的时候就获取位置,示例中,我们是想实现通过点击按钮获取地理位置。

通过点击按钮获取地理位置

打开按钮的控件设置,为该控件添加一个点击事件,如下图:

js如下:

点击(此处)折叠或打开

  1. 1. FR.location(function(status, message){ //获取地理位置

  2. 2. if(status=="success") {

  3. 3. //定位成功,message返回经纬度值

  4. 4. FR.Msg.alert("当前位置是" + message);

  5. 5. contentPane.setCellValue(2, 3, message);

  6. 6. } else {

  7. 7. //定位失败,message返回对应的错误信息

  8. 8. FR.Msg.alert(message); //定位失败

  9. 9. }

  10. 10. });


FineReport通过FR.location方法获取当前位置,如果status值为success,则表示获取地理位置成功否则定位失败,如果定位成功,则将返回的地理位置信息赋值给C4单元格。

但是该方法只在移动端有用,如果在web点击该按钮事件获取地理位置,则直接提示定位失败。

加载结束后获取当前位置

如果想在模板加载结束之后就获取到当前地理位置,那么只需要将上述代码添加到加载结束后事件中即可,打开模板,点击模板>模板web属性>填报页面设置,添加一个加载结束事件,如下图:

2.3 获取当前时间


在模板中还需要将当前签到时间也赋值过去,所以还需要在按钮的点击事件中获取到当前时间,并赋值给E4单元格,js如下:

11. var myDate = new Date();
12. var mytime=myDate.getFullYear()+"-"+myDate.getMonth()+1+"-"+myDate.getDate()+" "+myDate.getHours()+":"+myDate.getMinutes()+":"+myDate.getSeconds(); //获取当前时间
13. contentPane.setCellValue(4, 3, mytime);


按钮点击事件全部js如下:

  1. 14. FR.location(function(status, message){ //获取地理位置

  2. 15. if(status=="success") {

  3. 16. //定位成功,message返回经纬度值

  4. 17. FR.Msg.alert("当前位置是" + message);

  5. 18. contentPane.setCellValue(2, 3, message);

  6. 19. var myDate = new Date();

  7. 20. var mytime=myDate.getFullYear()+"-"+myDate.getMonth()+1+"-"+myDate.getDate()+" "+myDate.getHours()+":"+myDate.getMinutes()+":"+myDate.getSeconds(); //获取当前时间

  8. 21. contentPane.setCellValue(4, 3, mytime);

  9. 22.

  10. 23. } else {

  11. 24. //定位失败,message返回对应的错误信息

  12. 25. FR.Msg.alert(message); //定位失败

  13. 26. }

  14. 27. });



2.4 效果查看


将该模板添加到数据决策系统的节点树上,其操作方法请查看添加模板,其中模板的预览方式为填报,如下图:


根据添加服务器章节介绍的操作步骤,用移动端登录该系统,访问该张模板,点击地理位置按钮获取当前地理位置和当前时间,如下图:


但是,FineReport获取到的地理位置是经纬度,如需要确定其具体位置,就需要另外转换。

移动端的开发还在持续学习中,感兴趣的朋友可以和我一起探讨研究。




本文转自 雄霸天下啦 51CTO博客,原文链接:http://blog.51cto.com/10549520/1770464,如需转载请自行联系原作者
相关文章
|
2天前
|
JavaScript 前端开发
js怎么定位不同的页面元素
在JavaScript中,有多种方法定位和选择页面元素。
|
5天前
|
存储 JavaScript 安全
深入浅出Node.js后端开发
【9月更文挑战第6天】在数字化浪潮中,后端开发作为技术架构的支柱,承载着数据存储、业务逻辑处理和用户交互等核心功能。Node.js,作为一个轻量级、高效的JavaScript运行环境,已经成为许多开发者的首选工具。本文将深入探讨Node.js的基础知识、实战应用以及面临的挑战,旨在为初学者和经验丰富的开发者提供一份全面的指南。从搭建开发环境到部署应用程序,我们将一步步揭示Node.js的魅力所在,同时也会触及性能优化和安全防护等高级话题。无论你是初涉后端开发的新手,还是希望深化对Node.js的理解,这篇文章都将是你的宝贵资源。
|
7天前
|
JavaScript API 数据库
深入理解Node.js事件循环及其在后端开发中的应用
【9月更文挑战第3天】本文将深入浅出地介绍Node.js的事件循环机制,探讨其非阻塞I/O模型和如何在后端开发中利用这一特性来处理高并发请求。通过实际的代码示例,我们将看到如何有效地使用异步操作来优化应用性能。文章旨在为读者揭示Node.js在后端开发中的核心优势和应用场景,帮助开发者更好地理解和运用事件循环来构建高性能的后端服务。
|
8天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
【9月更文挑战第3天】本文将带你走进Node.js的世界,通过深入浅出的方式,让你了解Node.js的基本概念、特性以及如何在后端开发中应用。我们将从Node.js的安装开始,逐步深入到异步编程模型、事件驱动机制等核心概念,最后通过一个简单的Web服务器示例,让你对Node.js有一个全面的认识。无论你是前端开发者还是后端开发者,只要你对Node.js感兴趣,这篇文章都将为你打开一扇新的大门。
|
11天前
|
Kubernetes JavaScript Cloud Native
深入浅出Node.js后端开发
【8月更文挑战第31天】在数字化浪潮中,云原生技术如同星辰大海中的航船,引领企业乘风破浪。本文将带你从Docker容器的基础出发,探索至Kubernetes集群的奥秘,用代码示例点亮技术的灯塔,助你在云原生的海洋中找到属于自己的航道。
|
11天前
|
JavaScript 开发者
深入理解Node.js事件循环及其在后端开发中的应用
【8月更文挑战第31天】 本文将带你走进Node.js的事件循环机制,通过浅显易懂的语言和实例代码,揭示其背后的工作原理。我们将一起探索如何高效利用事件循环进行异步编程,提升后端应用的性能和响应速度。无论你是Node.js新手还是有一定经验的开发者,这篇文章都能给你带来新的启发和思考。
|
11天前
|
开发者 Java 存储
JSF 与 CDI 携手共进,紧跟技术热点,激发开发者情感共鸣,开启高效开发新征程
【8月更文挑战第31天】JavaServer Faces (JSF) 与 Contexts and Dependency Injection (CDI) 在 Java EE 领域中紧密协作,助力开发者高效构建现代 Web 应用。JSF 凭借其丰富的组件库和页面导航功能受到青睐,而 CDI 则优雅地管理对象生命周期并实现依赖注入。两者结合,不仅简化了复杂企业应用的开发,还实现了松耦合架构,增强了代码的灵活性、可维护性和可扩展性。通过示例展示了如何利用 CDI 将业务服务对象注入 JSF Managed Bean,以及如何在不同页面间共享数据,突显了这一组合的强大功能。
26 0
|
11天前
|
大数据 数据处理 分布式计算
JSF 逆袭大数据江湖!看前端框架如何挑战数据处理极限?揭秘这场技术与勇气的较量!
【8月更文挑战第31天】在信息爆炸时代,大数据已成为企业和政府决策的关键。JavaServer Faces(JSF)作为标准的 Java Web 框架,如何与大数据技术结合,高效处理大规模数据集?本文探讨大数据的挑战与机遇,介绍 JSF 与 Hadoop、Apache Spark 等技术的融合,展示其实现高效数据存储和处理的潜力,并提供示例代码,助您构建强大的大数据系统。
21 0
|
Web App开发 JavaScript 前端开发
创建ArcGIS API for JavaScript的第一个示例程序
原文:创建ArcGIS API for JavaScript的第一个示例程序     在上一篇博客中已经介绍了如何搭建ArcGIS API for JavaScript开发环境,如果您还没有搭建好开发环境的话,参考博客:http://blog.csdn.net/zdw_wym/article/details/48678913。
1383 0
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
69 2