移動端報表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。