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>

2. JS語法

2.1 普通的JS語法

如在事件編輯裏面彈出對話框，使用alert(要彈出內容)便可。

2.2 jQuery語法

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開頭的關鍵字：