1. 概述
jQuery 是一個快速簡潔的 JavaScript 庫，使使用者能方便地處理 HTML 實現交互效果。
FineReport 報表前端採用 jQuery 框架，製作的報表解析後最終成為一個 HTML 文檔，即每一份範本在瀏覽器端預覽時都將對應一個 HTML 頁面。因此使用者可以使用 jQuery 框架的所有方法對報表前端進行二次開發；同時 FineReport 還提供了前端 JS API 供使用者開發使用。
本文將介紹在 FineReport 中如何進行前端二次開發，使用者瞭解後就可以透過 JavaScript 或 CSS 來修改報表內容或新增交互特效。
2. 預備知識
在進行前端二次開發前，使用者需要對以下知識有基本瞭解，知道 JavaScript 是如何與 HTML 和 CSS 一起工作的。
HTML 定義了網頁的內容，CSS 描述了網頁的佈局，JavaScript 控制了網頁的行為。
HTML 是用來描述網頁的一種語言，Web瀏覽器（如谷歌瀏覽器，Internet Explorer，Firefox）讀取 HTML 檔案後將其作為網頁顯示。
JavaScript 是一種編程語言，可以控制網頁的行為，可以修改網頁內容，程式碼可以直接插入 HTML 頁面，插入後可由瀏覽器執行。
CSS 用於定義網頁的樣式，樣式即如何顯示 HTML 元素，如定義 HTML 中標籤元素的顏色、背景等。
更多詳細內容可以查看 JavaScript 、HTML 、CSS 的學習網頁。為了您更好的開發報表，建議您提前學習一下相關內容！
3. 功能介紹
每一份範本在瀏覽器端都對應一份 HTML 文檔，作為一份 HTML 文檔，就可以透過 JavaScript 或 CSS 進行修改。
3.1 JavaScript
3.1.1 新增事件
JavaScript 對使用者的輸入回应，是以事件驅動的方式進行的。所謂事件驅動，就是指在主頁中執行了某種操作所產生的動作，如點選滑鼠、行動視窗、選擇選單等，當動作發生後，會引起相應的事件回应。
FineReport 提供了「事件」功能和對應的 「JavaScript 腳本」回应方式 。製作範本時，使用者可以在此新增 JS 事件。如下圖所示：
新增事件時，可以直接將程式碼寫在範本中；也可以建立一個 JS 檔案後，放在工程目錄下，在範本中引用此檔案。如何使用可參考：JavaScript脚本
新增事件後，當報表轉為 HTML 頁面時會將這些事件程式碼新增到 HTML 的頭部，當事件被觸發時程式碼內容將會被執行，報表就會顯示出程式碼想要實現的效果。
如下圖所示，在設計器中給對應的範本新增了一個「填報成功」事件，事件內容為設定「列印」和「匯出」按鈕不可用。
預覽報表，填報提交成功後，工具欄「列印」和「匯出」功能不可用。如下圖所示：
3.1.2 引用腳本
製作範本時也可以引用 JavaScript 腳本檔案，相同的功能就可以用同一個檔案，提高程式碼的可用性。除 JavaScript腳本 編輯框中支援引用 JavaScript 腳本檔案外，在菜單欄也有專門引用 JavaScript 的入口。如下圖所示：
若 JS 檔案只用於單個範本，可以透過菜單欄點選「範本>範本 Web 屬性>引用 JavaScript 」引用。
若 JS 檔案用於報表工程下所有範本，可透過菜單欄點選「伺服器>伺服器配置>引用 JavaScript」統一引用。
如何使用可參考 範本web屬性 對應章節。
3.1.3 Web頁面整合
以上兩節主要講解使用者如何在範本中新增 JavaScript 程式碼。開發報表時，使用者也可以將 FineReport 報表整合在 Web 頁面中，整合後再透過 JavaScript 修改報表。
如果報表嵌在網頁的 iframe 中，就可以透過如下方式，獲取到報表視窗：
document.getElementById('報表所在iframe的id').contentWindow;
其中 document.getElementById('報表所在iframe') 是獲取報表 iframe 物件，contentWindow 是獲取報表視窗。
獲取後，就可以使用前端程式碼對其修改，或者使用帆軟API JS API。如報表嵌入在 iframe 的 ID為"reportFrame"時，呼叫報表的跳轉到上一頁API：
document.getElementById('reportFrame').contentWindow._g().gotoPreviousPage();
使用帆軟API JS API 詳細介紹可參考 JS API 使用說明章節。
3.2 CSS
3.2.1 新增事件
透過新增事件的方式修改 CSS 樣式。修改 CSS 樣式也透過 JavaScript 修改，直接使用 JavaScript腳本 新增即可。
如下圖所示，在設計器中給日期元件新增了一個「初始化後」事件，透過修改日期元件的 CSS 來修改日期元件的字體樣式。
修改後效果為：
3.2.2 引用腳本
製作範本時，可以引用 CSS 腳本檔案。這樣，相同的功能就可以用同一個檔案，提高程式碼的可用性。在菜單欄有專門引用 CSS 的入口。如下圖所示：
若 CSS 檔案只用於單個範本，可以透過菜單欄點選「範本>範本 Web 屬性>引用 Css 」引用。
若 CSS 檔案用於報表工程下所有範本，可透過菜單欄點選「伺服器>伺服器配置>引用 Css」 統一引用 。
如何使用可參考 範本web屬性 對應章節。
