Web報表工具FineReport中JavaScript的使用淺析

Web報表工具FineReport中JavaScript的使用淺析

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

1. 如何使用JS

1.1 報表範本中使用JS

作用機理：

設計範本時可以給控制項、工具列按鈕、整個報表添加JS事件，每個事件對應一個function。當報錶轉為html頁面時會將這些function加到html的頭部head。當事件被觸發時如點擊按鈕時，或者匯出列印報表時，對應的function就會被執行。

引入現成的JS檔案：

單個模板引入外部JS檔案：分頁預覽、填報預覽或者資料分析旁的設定表徵圖，然後點擊引用JavaScript；

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

相對路徑引用JS：相對於報表工程目錄如WebReport，如WebReport\js下有引用的JS檔案test.js，則相對路徑為js/test.js；

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

事件編輯介面：

FineReport有統一的事件編輯介面，如按鈕控制項設定>事件編輯>添加點擊事件便可看到事件編輯介面了，如。

 

 

1.2 自訂頁面中使用JS

通過擷取iframe中的報表再使用FineReport的JS方法

如：報表嵌入在iframe的id為"reportFrame"時，調用報表的預覽列印方法，如下：

 

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

 

引入FineReport的js檔案再使用FineReport的JS方法

代碼:

 

<script type="text/javascript" src="/WebReport/ReportServer?op=resource&resource=/com/fr/web/jquery.js"></script> <script type="text/javascript" src="/WebReport/ReportServer?op=emb&resource=finereport.js"></script><script type='text/javascript'> function doPrint(){      var url="http://localhost:8075/WebReport/ReportServer?reportlet=gettingstarted.cpt";//連接埠和ip根據具體情況設定      FR.doURLFlashPrint(url); }  </script> 

 

要注意的是，如果該頁面中引入了其他版本的jquery.js，可能會有JS衝突，因此建議通過擷取iframe中的報表再使用FineReport的JS方法

 

2.JS文法

2.1 普通的JS文法

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

2.2jQuery文法

jQuery的基礎文法是：$("tr")，貨幣符號$定義 jQuery；選擇符("tr")就可以擷取頁面所在行。

更多jQuery方法請參考其官方jQuery Version 1.9.2 API文檔。

2.3 報表內建的JS方法

如何使用報表內部定義好的JS方法，可在事件編輯裡面直接調用，如FR.doURLFlashPrint調用Flash列印，代碼如下：

FR.doURLFlashPrint("http://localhost:8075/WebReport/ReportServer?reportlet=gettingstarted.cpt");

3. 自動補全JS

在FineReport設計器內使用JS語句實現某功能時，為了避免JS代碼輸入錯誤，提供了JS自動補全功能，使用方法如下：

3.1 啟動自動補全功能

設計器內預設不執行自動補全功能，點擊檔案>選項>編輯器設定，勾選預設執行該操作前面的複選框，如：

3.2 修改快速鍵設定

設計器內建JS自動補全快速鍵為ctrl+space，但是電腦不同，設定的快速鍵不同，預設快速鍵可能已經被佔用，此時，需要修改捷徑，雙擊自動補全快速鍵：ctrl+SPACE，通過鍵盤操作一遍需要的捷徑，比如說，將自動補全的捷徑更改為ctrl+Q，如，在彈出的捷徑修改框中，先按住ctrl，然後按下Q鍵，捷徑即已修改：

 

3.3 效果查看

隨意選擇一處可以輸入JS語句的地方，比如說，選中儲存格，右鍵選擇控制項設定，點擊事件編輯，添加一個初始化事件，在右側JS輸入框中輸入con，然後，操作快速鍵ctrl+Q，在右下角列出所有con開頭的關鍵字：