JS API 簡介

1.1 版本

1.2 更新說明

FineReport 11.0 提供了全新的 JS API 手冊，每個接口都有詳細的使用說明，方便使用者對報表進行前端設計。相比於 10.0  的 JS 接口，11.0 的接口具有以下優點：

• 接口統一規整，同樣的功能，除特殊情況外決策報表和普通報表一致；同時對行動端的支援情況也做了說明。

• 結構清晰，範圍明確，具有整體性；每個接口都有詳細的使用說明，對用戶使用和學習友好，簡單易上手。

• 將 10.0 中用戶使用較多的場景做成接口，不用再透過大段代碼實現，相容性好，版本更新對代碼影響小，如跑馬燈、滑鼠懸浮時儲存格變色等場景。

用戶由 10.0 升級到 11.0 時特別要注意相容問題，詳情見：JS API 相容說明

1.3 功能介紹

API 手冊分兩大模組，公共模組和私有模組。公共模組下的接口決策報表和普通報表都可以使用，私有模組下的接口只能對應的報表型別使用。

• 公共模組部分，又根據接口所能作用的元素範圍劃分為報表全局接口、參數面板接口、元件接口、表格接口、圖表接口、工具列接口、報表分頁匯出。

• 私有模組部分，分決策報表，普通報表以及 FVS 視覺化看板。普通報表將不同預覽模式下支援的接口分別列出，決策報表則以組件型別區分，FVS 視覺化看板僅針對報表中的 FVS 編輯模式生效。

如下圖所示：

所有接口匯總可見：API接口匯總

使用接口時，一般透過全局接口獲取到報表物件，然後再使用其方法對報表全局操作或者獲取報表物件中的其他物件，獲取到其他物件後再使用其方法或繼續向下獲取。

透過一層一層的方法獲取指定物件，然後使用其對應的方法和屬性。具有層次性，也即 JS 中方法的繼承性。

如要隱藏「參數面板」上「下拉框」元件 comboBox0 ，即設定元件 comboBox0 不可見：

1）首先用全局接口 _g() 獲取報表物件。

2）因為要獲取參數面板上元件，所以先要獲取到參數面板，使用 _g() 的 getParameterContainer 方法獲取參數面板物件，即：

_g().getParameterContainer

3）獲取到參數面板後，再獲取參數面板上的「下拉框」元件，使用參數面板的 getWidgetByName 接口獲取元件，即：

_g().getParameterContainer().getWidgetByName("comboBox0")

4）獲取到元件後，使用元件的 setVisible 方法設定元件不可用將其隱藏，至此便得到了設定「參數面板」上元件不可用的 JS 語句，即：

_g().getParameterContainer().getWidgetByName("comboBox0").setVisible(false);

2.1 在範本中使用

範本中使用時，只需要將代碼新增在 JavaScript 腳本中即可，如何新增可參考：JavaScript腳本

如將上述隱藏「下拉框」元件的代碼新增在一個「按鈕元件」的「點擊」事件中，如下圖所示：

保存範本，點選預覽即可實現點選按鈕隱藏「下拉框」元件的功能，如下圖所示：

2.2 在 Web 頁面中使用

開發報表時，使用者也可以在自訂的 Web 頁面中呼叫 FineReport 提供的 JS 接口。

1）如果報表嵌在網頁的 iframe 中，首先透過document.getElementById('報表所在iframe的id')獲取 iframe 物件，再獲取 contentWindow，最後使用接口。

如報表嵌入在 iframe 的 ID為"reportFrame"時，呼叫報表的填報提交接口，代碼如下：

document.getElementById('reportFrame').contentWindow._g().writeReport();

其中document.getElementById('reportFrame')是獲取報表iframe 物件，獲取到後再透過 _g() 獲取報表物件，最後使用填報的提交接口 writeReport() 。

範例詳細可參考：自訂提交按鈕

2）如果要使用 FR 物件上的方法，需要先引入 FineReport 的  fineReport.js 檔案再使用。如引用後使用 FR 物件的彈出對話方塊方法：

<script type="text/javascript" src="/webroot/decision/view/report?op=emb&resource=finereport.js"></script>
<script>
function button_onclick(){
FR.showDialog("Test", 600, 400, "Hello World")
}
</script>

範例詳細可參考：FR物件使用說明