移动端报表JS开发示例--获取定位
上次分享了移动端报表JS开发的系统概念,后来我又回去摸索了一些案例。之前接触到的FineReport的APP客户端可以用来打卡签到,就好奇研究了以下,这次就来聊一聊报表移动端开发如何实现定位功能。
1. 解决思路
在用FineReport设计模板的时候添加一个按钮控件,点击该按钮的时候,获取当前地理位置,并将该位置信息复制给某个单元格,最后在客户端填报当前模板即可。
2. 示例
实现如下图所示效果,点击地理位置按钮获取当前位置与当前时间,并显示在下方对应的单元格中:
2.1 模板制作
打开设计器,新建一张模板,按照如下图所示样式设计模板,其中E2单元格为按钮控件,控件名称为地理位置,C5为下拉框控件,E5为时间控件:
2.2 获取当前地理位置
获取当前地理位置有两种方式,一个是点击按钮获取地理位置,一个是直接打开模板的时候就获取位置,示例中,我们是想实现通过点击按钮获取地理位置。
通过点击按钮获取地理位置
打开按钮的控件设置,为该控件添加一个点击事件,如下图:
js如下:
1. FR.location(function(status, message){ //获取地理位置
2. if(status=="success") {
3. //定位成功,message返回经纬度值
4. FR.Msg.alert("当前位置是" + message);
5. contentPane.setCellValue(2, 3, message);
6. } else {
7. //定位失败,message返回对应的错误信息
8. FR.Msg.alert(message); //定位失败
9. }
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如下:
14. FR.location(function(status, message){ //获取地理位置
15. if(status=="success") {
16. //定位成功,message返回经纬度值
17. FR.Msg.alert("当前位置是" + message);
18. contentPane.setCellValue(2, 3, message);
19. var myDate = new Date();
20. var mytime=myDate.getFullYear()+"-"+myDate.getMonth()+1+"-"+myDate.getDate()+" "+myDate.getHours()+":"+myDate.getMinutes()+":"+myDate.getSeconds(); //获取当前时间
21. contentPane.setCellValue(4, 3, mytime);
22.
23. } else {
24. //定位失败,message返回对应的错误信息
25. FR.Msg.alert(message); //定位失败
26. }
27. });
2.4 效果查看
将该模板添加到数据决策系统的节点树上,其操作方法请查看添加模板,其中模板的预览方式为填报,如下图:
根据添加服务器章节介绍的操作步骤,用移动端登录该系统,访问该张模板,点击地理位置按钮获取当前地理位置和当前时间,如下图:
但是,FineReport获取到的地理位置是经纬度,如需要确定其具体位置,就需要另外转换。
移动端的开发还在持续学习中,感兴趣的朋友可以和我一起探讨研究。
移动端报表JS开发示例--获取定位相关推荐
- java获取移动端定位_移动端报表JS开发示例--获取定位
上次分享了移动端报表JS开发的系统概念,后来我又回去摸索了一些案例.之前接触到的FineReport的APP客户端可以用来打卡签到,就好奇研究了以下,这次就来聊一聊报表移动端开发如何实现定位功能. 1 ...
- 移动端报表JS开发示例
最近对移动端的报表开发颇有研究,细磨精算了好久,虽然到现在还是"囊中羞涩",但决定还是先抛砖引玉,拿点小干货出来和大家分享. 研究的工具是比较有代表性的FineReport. 1. ...
- 移动端报表JS开发演示样例
近期对移动端的报表开发颇有研究,细磨精算了好久,尽管到如今还是"囊中羞涩",但决定还是先抛砖引玉,拿点小干货出来和大家分享. 研究的工具是比較有代表性的FineReport. 1. ...
- js 点击button切换颜色_ThingJS 和three.js开发示例对比,让开发早点下班回家!3D 可视化...
ThingJS 3D框架简化了开发工作,面向对象和模块化的特点使得网页代码更加易于管理和维护,并且提供近200个官方示例,直接获取API能力,不需要基于3D概念进行开发,适合3D商业项目快速生成!距离 ...
- cordova使用cordova-plugin-baidumaplocation插件获取定位
原文:cordova使用cordova-plugin-baidumaplocation插件获取定位 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/m ...
- 《Three.js 开发指南》源码示例说明以及在线demo(原书第二版)附第三版的代码下载
<Three.js 开发指南>基于原书第二版 源码来自华章出版社官网随书源码,修改替换了其中不能跑的示例,保证每个demo都可以运行. 源码以及示例说明下载: git下载地址 huazha ...
- reactnative 获取定位_react native 获取地理位置的方法示例
react native 官网介绍了这个 api Geolocation 但是这个api只能返回 经纬度 所以要把经纬度 通过逆地理位置转义 http://recode.ditu.aliyun.com ...
- SharePoint 2013 APP 开发示例 (二)获取用户信息
这个示例里,我们将演示如何获取用户信息: 1. 打开 Visual Studio 2012. 2. 创建一个新的 SharePoint 2013 app: UserProfileTest. 3. 选 ...
- C# 调用高德地图API获取经纬度以及定位,JS获取定位【万字详解附完整代码】
最近有个需求,需要用到定位,本来打算用百度地图API定位,但是发现百度地图定位申请AppKey太麻烦了.因为是写的web端,百度地图定位API申请的Appkey需要网址过滤.索性就用高德定位了(有一说 ...
最新文章
- python3.4.4怎么打代码_Python3.4里面__name和__main__的作用
- oss导出数据为空时怎么处理_sql数据库导出空库的搜索结果-阿里云开发者社区...
- python调用matlab环境配置、非常详细!!!_Python调用Matlab2014b引擎
- 一篇文章入门深度学习框架PyTorch
- 1.4 torch_向量/矩阵求偏导
- 基于Echarts+HTML5可视化数据大屏展示—大数据管理平台中心
- java 获取泛型_聊聊Java泛型擦除那些事
- 大数据的发展体现在哪些方面
- B - Sort the Array
- 用简单 JS 实现代替 MYBATIS LOG PLUGIN 的功能
- Objective C TCP 通讯实例
- Total Control的深入用法,如何使用脚本实现启动或重启指定App
- 阿里架构师经验分享!写给即将正在找工作的Java攻城狮,吊打面试官
- 召唤神龙无敌版------小鱼吃大龙
- Flash鼠绘教程:临摹徐悲鸿的骏马图
- Maven filter 导致打包以后的excel文件损坏的问题
- 【中国人口金字塔2019,python,pandas,matplotlib,numpy 】
- MySQL的隐式类型转换
- Collection和List,Set,Map的关系与说明
- 不可告人的隐私百度云_理解围绕软件技术标准的不可告人的动机和力量
热门文章
- python 装饰器粗浅理解
- ef 连接localdb_如何连接和使用Microsoft SQL Server Express LocalDB
- dmv io读写高的sql_使用内置的动态管理视图(DMV)发现更多SQL Server信息
- 什么是SQL Server中的数据库规范化?
- go路由httprouter中的压缩字典树算法图解及c++实现
- Web常见漏洞修复建议
- poj1200 Crazy Search(hash)
- python web开发-flask中消息闪现flash的应用
- TypeSDK免费手游多渠道SDK接入方案
- 开源原生JavaScript插件-CJPCD(省市区联动)