移動端報表JS開發樣本--擷取定位

標籤：javascript   移動開發   報表開發   

上次分享了移動端報表JS開發的系統概念，後來我又回去摸索了一些案例。之前接觸到的FineReport的APP用戶端可以用來打卡簽到，就好奇研究了以下，這次就來聊一聊報表移動端開發如何?定位功能。

1. 解決思路

在用FineReport設計範本的時候添加一個按鈕控制項，點擊該按鈕的時候，擷取當前地理位置，並將該位置資訊複製給某個儲存格，最後在用戶端填報當前模板即可。

2. 樣本

實現如所示效果，點擊地理位置按鈕擷取當前位置與目前時間，並顯示在下方對應的儲存格中：

650) this.width=650;" src="http://dl2.iteye.com/upload/attachment/0117/1911/02d47126-eb37-39d0-b923-39c8d6ca949a.png" style="border:0px;" />

2.1 模板製作

開啟設計器，建立一張模板，按照如所示樣式設計範本，其中E2儲存格為按鈕控制項，控制項名稱為地理位置，C5為下拉框控制項，E5為時間控制項：

650) this.width=650;" src="http://dl2.iteye.com/upload/attachment/0117/1913/3e0adcb7-f8a7-321b-a8cb-49b8d9180302.png" style="border:0px;" />

2.2 擷取當前地理位置

擷取當前地理位置有兩種方式，一個是點擊按鈕擷取地理位置，一個是直接開啟模板的時候就擷取位置，樣本中，我們是想實現通過點擊按鈕擷取地理位置。

通過點擊按鈕擷取地理位置

開啟按鈕的控制項設定，為該控制項添加一個點擊事件，如：

650) this.width=650;" src="http://dl2.iteye.com/upload/attachment/0117/1915/d0a01efc-887e-36de-87ae-ab92997994e4.png" width="583" height="423" style="border:0px;" />

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屬性>填報版面設定，添加一個載入結束事件，如：

650) this.width=650;" src="http://dl2.iteye.com/upload/attachment/0117/1917/d525d9e2-cf3f-3ebc-a3d0-2d233ce201c2.png" width="565" height="526" style="border:0px;" />

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 效果查看

將該模板添加到資料決策系統的節點樹上，其操作方法請查看添加模板，其中模板的預覽方式為填報，如：

根據添加伺服器章節介紹的操作步驟，用移動端登入該系統，訪問該張模板，點擊地理位置按鈕擷取當前地理位置和目前時間，如：650) this.width=650;" src="http://dl2.iteye.com/upload/attachment/0117/1921/a691be77-c78b-3239-be32-2627f93d2df0.png" style="border:0px;" />

但是，FineReport擷取到的地理位置是經緯度，如需要確定其具體位置，就需要另外轉換。

移動端的開發還在持續學習中，感興趣的朋友可以和我一起探討研究。

移動端報表JS開發樣本--擷取定位