wuxiren123

          移動端報表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(23, 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(43, mytime);   


          按鈕點擊事件全部js如下:

          14.    FR.location(function(status, message)//獲取地理位置  
          15.    if(status=="success"{  
          16.        //定位成功,message返回經緯度值  
          17.        FR.Msg.alert("當前位置是" + message);  
          18.        contentPane.setCellValue(23, 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(43, mytime);   
          22.      
          23.    }
           else {  
          24.        //定位失敗,message返回對應的錯誤信息  
          25.        FR.Msg.alert(message); //定位失敗  
          26.    }
            
          27.    }
          );  




           

          2.4 效果查看


          將該模板添加到數據決策系統的節點樹上,其操作方法請查看添加模板,其中模板的預覽方式為填報,如下圖:


          根據添加服務器章節介紹的操作步驟,用移動端登錄該系統,訪問該張模板,點擊地理位置按鈕獲取當前地理位置和當前時間,如下圖:


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

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

          posted on 2016-05-05 16:38 喝水居然長肉 閱讀(104) 評論(0)  編輯  收藏


          只有注冊用戶登錄后才能發表評論。


          網站導航:
           
          主站蜘蛛池模板: 绩溪县| 沅江市| 临安市| 谢通门县| 柘城县| 常熟市| 兴义市| 墨竹工卡县| 黑河市| 廉江市| 盐源县| 越西县| 玉山县| 逊克县| 开化县| 基隆市| 长宁县| 金堂县| 托克托县| 武强县| 沾益县| 东乡县| 麻栗坡县| 宝丰县| 渭南市| 辽中县| 南阳市| 朝阳区| 林州市| 美姑县| 安西县| 孙吴县| 东山县| 济源市| 巫溪县| 衡山县| 龙口市| 沾化县| 万载县| 武宁县| 福清市|