移動端報表JS開發技術分享

最近對移動端的報表開發很有研究，細磨精算了很久，雖然到如今仍是「囊中羞澀」，但決定仍是先拋磚引玉，拿點小乾貨出來和你們分享。

研究的工具是比較有表明性的FineReport。

一、  移動端哪些地方支持調用js

web事件     分頁預覽 填報預覽

加載結束事件 √           X

填報成功事件 --           √

報表內部js      單元格       圖表

超級連接js    √        √

控件事件 參數控件 填報控件 表單控件

初始化後事件   √           √           X

編輯前           √           √           X

編輯後           √           √           X

編輯結束            √           √           X

點擊                    √           √           X

狀態改變            √           √           √

‍二、  報表控件支持的腳本函數‍

函數名        函數描述           填報控件       參數控件  表單控件

setEnable    設置控件的可用性       √        √             √

isEnable    判斷控件是否可用       √        √             √

setVisible    設置控件的可見性       √        √             √

isVisible    判斷控件的可見性        √        √             √

setValue    設置控件值                √        √             √

getValue    獲取控件的值                √        √             √

setText    設置控件的顯示值        √        √             √

getText    獲取控件的顯示值        √        √             √

reset            重置控件                √        √             √

fireEvent   觸發指定名字的事件 √        √             √

‍三、  報表分頁預覽支持的腳本函數‍

函數名                  函數描述         補充說明                                                      實現

contentPane          當前報表對象     無                                                          √

currentPageIndex  當前所在頁 contentPane經常使用屬性 只有分頁預覽報表纔有 √

reportTotalPage 總頁數         contentPane經常使用屬性 只有分頁預覽報表纔有 √

gotoFirstPage         首頁                    無                                                                 √

gotoPreviousPage 上一頁            無                                                                  √

gotoNextPage         下一頁            無                                                                 √

gotoLastPage         末頁                    無                                                                 √

gotoPage(n) 跳轉到某一頁         包含1個參數，表示跳轉到第幾頁                 √

‍四、  填報預覽報表支持的腳本函數‍

函數名                           函數描述                   補充說明                                                                                      實現

contentPane                 當前報表對象                     無                                                                                √

verifyReport                 數據校驗         只有填報表才能夠用，contentPane經常使用方法                                        √

writeReport                 提交報表         只有填報表才能夠用，contentPane經常使用方法                                        √

verifyAndWriteReport  數據校驗後提交報表      只有填報表才能夠用，contentPane經常使用方法                        √

curLGP                         current logicpane       contentPane經常使用屬性，只有填報預覽及表單預覽下才有        √

getCellValue(cell)         獲取指定格子的值 包含1個參數，單元格，只有填報下有，curLGP經常使用方法                √

getCellValue(col, row)         獲取指定格子的值 包含2個參數，列和行，只有填報下有，curLGP經常使用方法        √

setCellValue(cell, null, value) 設置指定格子的值 包含3個參數，單元格，空和值，只有填報下有，curLGP經常使用方法    √

setCellValue(col, row, value) 設置指定格子的值 包含3個參數，列，行和值，只有填報下有，curLGP經常使用方法      √

getWidgetByCell                 獲取指定單元格中的控件 包含1個參數，單元格，contentPane經常使用方法              √

getWidgetByName                 獲取指定名字的控件 包含1個參數，控件名，contentPane經常使用方法                       √

getWidgetsByName         獲取指定名稱的擴展控件  包含1個參數，控件名，contentPane經常使用方法              √

五、經常使用的工具類腳本函數

函數名                函數描述                  補充說明                                                                                    實現

FR.Msg.alert    彈出消息框函數      包含3個參數，分別表示：標題，內容，回調函數                  √

FR.Msg.confirm  值確認彈出框函數      包含3個參數，分別表示：標題，值，回調函數                  √

FR.Msg.prompt   可修改值的值確認彈出框函數 包含4個參數，分別表示：標題，說明，值，回調函數 √

FR.Msg.toast 在頁面邊緣出現的消息提示塊，一小段時間後自動消失 包含1個參數，表示要提示的信息 √

FR.cjkEncode  進行cjk編碼              包含1個參數，字符串                                                        √

FR.cjkDecode  進行cjk解碼              包含1個參數，字符串                                                        √

FR.location 地理位置獲取              包含一個回掉函數返回獲取狀態及信息                                √

FR.doHyperlinkByGet /FR.doHyperlinkByPost包含2個參數，分別表示：超鏈的url， 傳遞的參數    √

FR.ajax         異步請求函數                                        /                                                         √

_g().parameterCommit() 分頁預覽及填報預覽自動查詢 /                                                          √

contentPane.setAppearRefresh() 頁面再現的時候自動刷新 /                                                  √

以上對應着報表的功能大體羅列了如下框架，下面先舉一些小示例

獲取控件的一系列方法

this.options.form.getWidgetByName("控件名");  //參數界面及表單中獲取控件

contentPane.getWidgetByCell("單元格");  //填報界面獲取控件

contentPane.getWidgetByName("控件名");   //填報界面獲取控件

 

填報成功後刷新當前頁

var url = "/WebReport/ReportServer?reportlet=js/shauxindangqian.cpt&op=write&__replaceview__=true";
FR.doHyperlinkByGet(url,{para:paravalue});  //刷新當前頁面

 

js獲取表單圖表組件並刷新數據

var c=FR.Chart.WebUtils.getChart("chart0");
c.dataRefresh()；

 

延時函數

setTimeout(function() {  }, 500);

 

A超鏈至B填報，B提交數據後返回A時，A自動刷新顯示新的數據

contentPane.setAppearRefresh();  //在A的加載結束後事件中添加js

 

之後會陸續分享一些移動端實用功能的應用實例，還有HTML5，歡迎一塊兒探討。