移動端報表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. });

1. 可是該方法只在移動端有用，若是在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);

1. 按鈕點擊事件所有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獲取到的地理位置是經緯度，如須要肯定其具體位置，就須要另外轉換。

移動端的開發還在持續學習中，感興趣的朋友能夠和我一塊兒探討研究。