JS使用說明

一、場景

1. FineReport 報表解析後成為一個HTML頁面，採用 jQuery 框架。jQuery 是一個快速的，簡潔的 JavaScript 庫，使使用者能更方便地處理 HTML documents、events、實現動畫效果，方便地為網站提供 Ajax 互動，並且它相容各種瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），因此可以使用 JS 對報表進行各種處理，您可以使用 jQuery 框架的所有方法對報表進行操作，在此基礎上，FineReport 還封裝了很多內建的 JS 方法。本節我們就 JS 的基本使用做一個介紹。

1

報表模板中使用。

1. JS 作用機理。

   設計模板時可以給元件、工具欄按鈕、整個報表新增 JS 事件，每個事件對應一個 function。當報表轉為 HTML 頁面時會將這些 function 加到 HTML 的頭部 head。當事件被觸發時如點選按鈕時，或者匯出列印報表時，對應的 function 就會被執行。

2. 引入現成的 JS 檔案。

   單個模板引入外部 JS 檔案：範本→範本 Web 屬性→引用 JavaScript；

   報表工程下所有模板統一引入外部 JS 檔案：伺服器→伺服器配置→引用 JavaScript。

   相對路徑引用 JS：相對於報表工程目錄如 webapps，如webapps\webroot\help下有引用的 JS 檔案 demo.js；

   絕對路徑引用 JS：如D:\tomcat\webapps\webroot\WEB-INF\scripts\script.js。

3. 事件編輯介面。

   FineReport 有統一的事件編輯介面，如按鈕元件設定→事件→新增點選事件便可看到事件編輯介面了，如下圖。

2

自定義頁面中使用 JS。

1. 透過獲取 iframe 中的報表再使用 FineReport 的 JS 方法。

   如：報表嵌入在 iframe 的 ID 為"reportFrame"時，呼叫報表的列印預覽方法，如下：

2. document.getElementById('reportFrame').contentWindow.contentPane.printPreview()
   

3. 引入 FineReport 的 JS 檔案再使用 FineReport 的 JS 方法。

4. <script type="text/javascript" 
   src="/webroot/decision/view/report?op=resource&amp;
   resource=/com/fr/web/jquery.js">
   </script> 
     <script type="text/javascript" 
   src="/webroot/decision/view/report?op=emb&amp;
   resource=finereport.js">
   </script> 
     <script type="text/javascript"> function doPrint(){ 
   var url="http://localhost:8075/webroot/decision/view/report?viewlet=GettingStarted.cpt";//埠和ip根據具體情況設定 
   FR.doURLFlashPrint(url); 
   } </script>
   

5. 注：若該頁面中引入了其他版本的 jQuery.js，可能會有 JS 衝突，因此建議您透過獲取 iframe 中的報表再使用 FineReport 的 JS 方法。

1

普通的 JS 語法。

1. 如在事件編輯裡面彈出對話方塊，使用alert(要彈出內容)即可。

2

jQuery 語法。

1. jQuery 的基礎語法是：$("tr")，美元符號 $ 定義  jQuery；選擇符("tr")可以獲取頁面所在行。

3

報表内置的 JS 方法。

1. 報表內部定義好的 JS 方法，可在事件編輯裡面直接呼叫，如 FR.doURLFlashPrint 呼叫老的 Flash 列印，程式碼如下：

2. FR.doURLFlashPrint("http://localhost:8075/webroot/decision/view/report?viewlet=GettingStarted.cpt")
   

3. 注1：10.0設計器和部署包使用的都是 OpenJDK，而使用 OpenJDK 無法啟動 Flash 列印，但使用 Oracle/Sun JDK 可以。

4. 注2：Flash 列印目前是已經被淘汰了的技術，很多瀏覽器都將不再支援 Flash 列印，建議客戶使用零客戶端或本地列印。

在 FineReport 設計器內使用JS語句實現某功能時，為了便於使用者輸入JS，FineReport 提供了 JS 自動補全功能，使用方法如下。

1

啟動自動補全功能。

1. 設計器內預設不執行自動補全功能，點選檔案>選項>編輯器設置，勾選默認執行該操作前面的複選框，如下圖。

2

修改快捷鍵設定。

1. 設計器內建 JS 自動補全快捷鍵為 Alt+/，但是由於不同電腦，自己設定的快捷鍵不同，預設快捷鍵可能已經被佔用，此時，需要修改快捷方式，雙擊自動補全快捷鍵：Alt+/，透過鍵盤操作一遍您需要的快捷方式，比如說，將自動補全的快捷方式更改為Ctrl+Q，如下圖，在彈出的快捷方式修改框中，先按住 Ctrl，然後按下Q鍵，快捷方式即已修改。

3

效果查看。

1. 隨意選擇一處可以輸入 JS 語句的地方，比如說，選中單元格，右鍵選擇控制元件設定，點選事件編輯，新增一個初始化事件，在右側的 JS 輸入框中輸入 con，然後，操作快捷鍵 Ctrl+Q，在右下角列出所有 con 開頭的關鍵字。