JS API 簡介

1

版本

2

更新說明

1. FineReport 11.0 提供了全新的 JS API 手冊，每個API都有詳細的使用說明，方便使用者對範本進行前端設計。

2. 新版API統一規整，同樣的功能，除特殊情況外決策範本API和普通範本API保持一緻。

3. 新版将 10.0 中使用者使用較多的場景做成API，如跑馬燈、滑鼠懸浮時儲存格變色等，不用再透過冗長的 JS 代碼實現。

4. 新版将 10.0 中功能不支援、需要獲取 DOM 元素修改的場景需求做成API，如【資料分析】預覽下範本居中顯示、郵件按鈕支援的格式可以被修改等，方便使用者的使用。

3

功能簡介

1. API 手冊分兩大模組，【公共模組】和【私有模組】。

2. 其中【公共模組】決策範本和普通範本都可以使用，【私有模組】分決策範本和普通範本，分别只能在決策範本和普通範本中使用，如下圖所示。

1. 使用API時，一般透過全域API _g() 獲取到範本物件，然後使用 _g() 的方法獲取範本中其他物件，如參數面板物件、參數面板中元件物件、工具欄元素、工具欄中按鈕物件等。透過一層一層的方法獲取到指定物件後，再使用其對應的方法。下面以要隐藏【參數面板】上【下拉框】元件 comboBox0 ，即設置元件 comboBox0 不可見為例做簡要介紹：

2. 首先用全域API _g() 獲取範本物件。

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

4. 獲取到參數面板後，再獲取參數面板上的【下拉框】元件，使用參數面板的 getWidgetByName API獲取元件，即：_g().getParameterContainer().getWidgetByName("comboBox0")

5. 獲取到元件後，使用元件的 setVisible 方法設置元件不可用将其隐藏，至此便得到了設置【參數面板】上元件不可用的 JS 語句，即：_g().getParameterContainer().getWidgetByName("comboBox0").setVisible(false);

1

範本中使用

1. 模板中使用時，只需要将代碼添加在 JavaScript 腳本中即可，如何添加可參考：JS使用說明 。

2. 如将上述隐藏【下拉框】元件的JS语句添加在一個【按鈕元件】的【點擊事件】中，具體步驟為：①添加按鈕元件，②為按鈕添加【點擊事件】，③編輯事件，添加上述相關JS语句。如下圖1所示。

3. 預覽報表，點擊【按鈕元件】即可實現點擊按鈕隐藏【下拉框】元件的功能，如下圖2所示。

2

Web 頁面中使用

1. 開發範本時，使用者也可以在自定義的 Web 頁面中調用 FineReport 提供的 JS API。

2. 如果範本嵌在網頁的 iframe 中，首先透過document.getElementById('範本所在iframe的id')獲取 iframe 物件，再獲取 contentWindow，最後使用API。如範本嵌入在 iframe 的 ID爲"reportFrame"時，調用範本的填報提交API，其中document.getElementById('reportFrame')是獲取範本iframe 物件，獲取到後再透過 _g() 獲取範本物件，最後使用填報的提交API writeReport() 。示例詳細可參考：自订提交按鈕。代碼如下：document.getElementById('reportFrame').contentWindow._g().writeReport();

3. 如果要使用 FR 物件上的方法，需要先引入 FineReport 的  fineReport.js 檔案再使用。示例詳細可參考：FR物件使用說明。  如引用後使用 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>