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"時,調用報表的打印預覽方法,如下:

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

引入FineReport的js文件再使用FineReport的JS方法

代碼:

1 <script type="text/javascript" src="/WebReport/ReportServer?op=resource&resource=/com/fr/web/jquery.js"></script> 
2 <script type="text/javascript" src="/WebReport/ReportServer?op=emb&resource=finereport.js"></script>
3 <script type='text/javascript'> 
4 function doPrint(){ 
5      var url="http://localhost:8075/WebReport/ReportServer?reportlet=gettingstarted.cpt";//端口和ip根據具體情況設定 
6      FR.doURLFlashPrint(url); 
7 } 
8  </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打印,代碼如下:

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

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM