移動端報表JS開發示例

傑華園發表於2016-04-07
JS

最近對移動端的報表開發頗有研究，細磨精算了好久，雖然到現在還是“囊中羞澀”，但決定還是先拋磚引玉，拿點小乾貨出來和大家分享。

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

1、  移動端哪些地方支援呼叫js

web事件 分頁預覽 填報預覽
載入結束事件 √ X
填報成功事件 -- √


報表內部js 單元格 圖表
超級連結js √ √

控制元件事件 引數控制元件 填報控制元件 表單控制元件
初始化後事件 √ √ X
編輯前 √ √ X
編輯後 √ √ X
編輯結束 √ √ X
點選 √ √ X
狀態改變 √ √ √


2、報表控制元件支援的指令碼函式

函式名 函式描述 填報控制元件 引數控制元件 表單控制元件
setEnable 設定控制元件的可用性 √ √ √
isEnable 判斷控制元件是否可用 √ √ √
setVisible 設定控制元件的可見性 √ √ √
isVisible 判斷控制元件的可見性 √ √ √
setValue 設定控制元件值 √ √ √
getValue 獲取控制元件的值 √ √ √
setText 設定控制元件的顯示值 √ √ √
getText 獲取控制元件的顯示值 √ √ √
reset 重置控制元件 √ √ √
fireEvent 觸發指定名字的事件 √ √ √

3、報表控制元件支援的指令碼函式

函式名 函式描述 補充說明 實現
contentPane 當前報表物件 無 √
currentPageIndex 當前所在頁 contentPane常用屬性 只有分頁預覽報表才有 √
reportTotalPage 總頁數 contentPane常用屬性 只有分頁預覽報表才有 √
gotoFirstPage 首頁 無 √
gotoPreviousPage 上一頁 無 √
gotoNextPage 下一頁 無 √
gotoLastPage 末頁 無 √
gotoPage(n) 跳轉到某一頁 包含1個引數，表示跳轉到第幾頁 √


4、  填報預覽報表支援的指令碼函式

函式名 函式描述 補充說明 實現
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常用方法 √


5、常用的工具類指令碼函式

函式名 函式描述 補充說明 實現
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() 頁面再現的時候自動重新整理 / √


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

獲取控制元件的一系列方法

點選(此處)摺疊或開啟

  1. this.options.form.getWidgetByName("控制元件名");


點選(此處)摺疊或開啟

  1. contentPane.getWidgetByCell("單元格");

點選(此處)摺疊或開啟

  1. contentPane.getWidgetByName("控制元件名");



填報成功後重新整理當前頁

點選(此處)摺疊或開啟

  1. var url = "/WebReport/ReportServer?reportlet=js/shauxindangqian.cpt&op=write&__replaceview__=true";
  2. FR.doHyperlinkByGet(url,{para:paravalue});



 js獲取表單圖表元件並重新整理資料


點選(此處)摺疊或開啟

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




A超鏈至B填報，B提交資料後返回A時，A自動重新整理顯示新的資料


點選(此處)摺疊或開啟

  1. contentPane.setAppearRefresh();
以後還會陸續分享一些移動端實用功能的應用例項，還有HTML5，歡迎一起探討。


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/21472864/viewspace-2076703/，如需轉載，請註明出處，否則將追究法律責任。

相關文章