超級連結-JavaScript腳本

1.1 版本

1.2 應用場景

JavaScript 腳本是 FineReport 事件響應方式的一種，當事件發生時，執行 JavaScript 代碼，通常用於給報表新增一些互動作和頁面特效。

如下 JS實現無需點選查詢按鈕即可自動查詢，只需要給「下拉框」元件新增一個「編輯後」事件，事件內容為自動觸發查詢_g().parameterCommit()，即可實現不點選查詢按鈕，選擇值後就查詢報表內容。

1.3 功能介紹

設計器中有多個入口可以進入新增 JavaScript 腳本：

• 在事件中新增：元件的事件、Web 頁面事件、按鈕自訂事件、組件事件，詳細可參考：FineReport事件

• 在超級連結中新增，詳細可參考 超級連結-JavaScript腳本

新增介面分三部分，引用 JavaScript 腳本、參數、JavaScript 腳本。如下圖所示：

11.0.3 及之後新增 JavaScript 進階編輯器，使用者可以直接在編輯器中搜尋、查看官方 JS API，且會根據API推薦說明文檔相關範例。如下圖所示：

使用者想要透過新增 JS 實現交互效果，可以在報表範本中新增 JavaScript 代碼，即將代碼直接寫在範本中；或在外部建立 JavaScript 腳本檔案後放在工程目錄下，在範本中引入建立的 JavaScript 腳本檔案。

使用者編寫腳本或新增代碼時，除使用 JavaScript 自身的文法和 jQuery 的基礎文法外，也可以使用 FineReport 提供的 JS API API。

2.1 引用 JavaScript 腳本

引用 JavaScript 腳本檔案，腳本檔案必須放置在報表工程 %FR_HOME%\webapps\webroot 目錄下。放置好後，點選「引用 JavaScript 腳本」下的新增按鈕即可新增。

一般需要與 2.2節 編寫JavaScript腳本搭配使用。範例：JS實現文字動態輪播特效

2.2 編寫 JavaScript 腳本

使用者可以在範本中新增 JavaScript 代碼，當事件被觸發時將會執行對應的代碼。如下圖所示：

JavaScript 腳本編輯框支援格式化代碼，點選右上角「格式化代碼」圖示即可格式化代碼。如下圖所示：

為了避免 JavaScript 代碼輸入錯誤，FineReport 提供了 JavaScript 自動補全功能。在JavaScript 腳本編輯框中輸入不完整的 JS 文法，操作捷徑鍵後右下角就會出現待選的完整文法。如下圖所示：

設計器內預設不開啟自動補全功能，使用者若想開啟，點選「檔案>選項>編輯器設定」，勾選「預設執行該操作」，即可啟動自動補全功能。如下圖所示：

自動補全捷徑鍵預設為「Alt+/」，若預設捷徑鍵被佔用或想修改為習慣使用的捷徑鍵，可雙擊「Alt+/」修改捷徑鍵。雙擊後彈出快捷方式修改框，使用者透過鍵盤操作一遍要設定的捷徑鍵後點選確定即可完成修改。

如下圖所示，彈出快捷方式修改框後鍵盤按下 Ctrl鍵 + Q 鍵，即可將自動補全的快捷方式更改為 Ctrl+Q。

2.3 定義和使用參數

在參數位置定義的參數可以在下方 JavaScript 腳本編輯框中透過引用參數名使用，參數值支援字串、數值、布林型、日期、公式。

注1：元件的事件中新增參數時，值的位置不支援公式寫 $參數名 的用法。

注2：JavaScript 腳本中設定參數時，參數值不支援直接使用變化的動態的儲存格值。如需使用動態參數值，請改用 _g().getCellValue() API。

如下圖所示，在參數定義位置定義了一個參數 p_name，參數值為儲存格 B2 的值，在 JavaScript 腳本中透過參名 p_name 引用該參數。詳細範例可參考：JS實現動態改變超連結URL中的參數值

2.4 使用 JavaScript 進階編輯器

11.0.3 及之後新增 JavaScript 進階編輯器，使用者可以直接在編輯器中搜尋、查看官方 JS API，且會根據API推薦說明文檔相關範例。使用者使用進階編輯器可方便快捷的編寫 JS 代碼，且能保證代碼規範可相容。如下圖所示：

點選「進階編輯」即可進入 JavaScript 進階編輯器介面，編輯好後點選「確定」將傳回原介面，編輯的代碼也會寫在原介面的代碼框中。

JavaScript 進階編輯器介面分五部分。如下圖所示：

1）引用 JavaScript ：可以直接引用 JavaScript 腳本檔案，使用方法可參考 2.1 節。

2）參數：可以定義參數，在下方 JavaScript 腳本編輯框中使用，使用方法可參考 2.3 節。

3）JavaScript 編輯框：可以在範本中新增 JavaScript 代碼，使用方法可參考 2.2 節。

4）搜尋框：可以搜尋官方 JS API 中的API，搜尋到後官方API展示面板中模組欄、API欄、API說明欄、相關案例欄都會展示對應的API內容。如下圖所示：

5）官方API展示面板：顯示官方 JS API 的所有API，包括模組、API、API說明和相關案例。如下圖所示：

• 模組欄：即官方 JS API 的模組劃分，使用者可以根據模組快速找到相應的API。

• API欄：使用者點選某一個模組後，API欄將會展示該模組下的所有API，雙擊API即可寫入 JavaScript 編輯框。

• API說明欄：使用者點選某個API後，API說明欄將會展示該API的說明，API說明和說明文檔中的說明一致。

• 相關案例欄：根據所選的API，展示相關的說明文檔案例，雙擊連結可跳轉到對應的說明文檔，使用者可參考使用。

        注：內網使用者點選連結不能存取時，可以開放網路權限或者直接在說明文檔中搜尋標題尋找對應的文檔。