移动端报表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开发示例--获取定位的更多相关文章
- 移动端报表JS开发示例
最近对移动端的报表开发颇有研究,细磨精算了好久,虽然到现在还是“囊中羞涩”,但决定还是先抛砖引玉,拿点小干货出来和大家分享. 研究的工具是比较有代表性的FineReport. 1. 移动端哪些地方支 ...
- 移动端报表JS开发演示样例
近期对移动端的报表开发颇有研究,细磨精算了好久,尽管到如今还是"囊中羞涩",但决定还是先抛砖引玉,拿点小干货出来和大家分享. 研究的工具是比較有代表性的FineReport. 1. ...
- cordova使用cordova-plugin-baidumaplocation插件获取定位
原文:cordova使用cordova-plugin-baidumaplocation插件获取定位 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/m ...
- android使用百度地图SDK获取定位信息
本文使用Android Studio开发. 获取定位信息相对简单.我们仅仅须要例如以下几步: 第一步,注冊百度账号,在百度地图开放平台新建应用.生成API_KEY.这些就不细说了,请前往这里:titl ...
- 关于Finereport移动端报表二次开发的两个小例子
例1:刷新页面 1. 问题描述 A超链至B填报,B提交数据后返回A时,A自动刷新显示新的数据. 2. 解决方案 1. contentPane.setAppearRefresh(); //在A的加载结 ...
- SharePoint 2013 APP 开发示例 (二)获取用户信息
SharePoint 2013 APP 开发示例 (二)获取用户信息 这个示例里,我们将演示如何获取用户信息: 1. 打开 Visual Studio 2012. 2. 创建一个新的 SharePo ...
- 原生js开发,无依赖、轻量级的现代浏览器图片懒加载插件,适合在移动端开发使用
优势 1.原生js开发,不依赖任何框架或库 2.支持将各种宽高不一致的图片,自动剪切成默认图片的宽高 比如说你的默认图片是一张正方形的图片,则各种宽度高度不一样的图片,自动剪切成正方形. 完美解决移动 ...
- JS和Jquery获取和修改label的值的示例代码
abel标签在JS和Jquery中使用不能像其他标签一样用value获取它的值,下面有个不错的示例,希望大家可以学习下 来源: < JS和Jquery获取和修改label的值的示例代码 & ...
- SharePoint 2013 APP 开发示例 (六)服务端跨域访问 Web Service (REST API)
上个示例(SharePoint 2013 APP 开发示例 (五)跨域访问 Web Service (REST API))是基于JavaScript,运行在web browser内去访问REST AP ...
随机推荐
- Rafy 领域实体框架 - 领域模型设计器(建模工具)设计方案
去年4月,我们为 Rafy 框架添加了领域模型设计器组件.时隔一年,谨以本文,简要说明该领域模型设计器的设计思想. 设计目标 Rafy 实体框架中以领域驱动设计作为指导思想.所以在开发时,以领域建模为 ...
- 实战 ASP.NET Web API
Web API 框架是一个面向 Http 协议的通信框架.相对于 WCF 而言,Web API 只面向于 Http 协议设计,而且没有 WCF 那么繁琐的配置.Web API 的开发类似于 ASP.N ...
- 解决WebApi入参时多对象的问题
我们的项目是用WebApi提供数据服务,且WebPage跟APP中都有调用到. WebApi提供的接口一多,就发现一个问题,我们项目中有很多接口是接收POST(安全原因,我们采用的是https)请求的 ...
- 速战速决 (4) - PHP: 类基础, 抽象类, 接口, trait
[源码下载] 速战速决 (4) - PHP: 类基础, 抽象类, 接口, trait 作者:webabcd 介绍速战速决 之 PHP 类基础 抽象类 接口 trait 示例1.类的相关知识点 1(基础 ...
- php中的M方法
- Java开发程序,使用编辑器编写创建Java项目、类
打开Eclipse 出现界面 工作空间的路径可以选择一个大空间的磁盘存放,点击确定: 创建:程序左上角-文件-新建-JAVA项目 输入项目名(项目名不能为中文),点击完成: 在 包资源管理器中点击 ...
- 番外一:关于thinkphp框架下的文件导入路径问题
总的来说,要使在thinkphp框架下面HTML导入的图片.css文件和js文件有效,只有两种方法:(1)使用绝对路径:(2)在项目目录下创建新目录Public,把所有的img文件夹.js文件夹和cs ...
- Android实现播放器功能
package com.example.yzj.android_7_27; import android.content.ContentResolver;import android.content. ...
- RequireJS+JQueryMobile
RequireJS提供了JS下模块化开发的充分条件.之前我自己也在多个项目中尝试模块化开发,但是由于没有类似RequireJS这样的框架,最后的效果都不是很理想. 在RequireJS中,所有的JS都 ...
- OData V4 系列 .net应用
OData 学习目录 添加 OData Client Code Generator 扩展 添加OData T4生成工具 修改 T4 模板的 MetadataDocumentUri 运行Web项目,之后 ...