報(bào)表軟件FineReport采用的是jQuery v1.9.2框架,jQuery是一個(gè)快速的,簡(jiǎn)潔的JavaScript庫,能讓用戶更方便地處理HTML documents、events,實(shí)現(xiàn)動(dòng)畫效果,方便地為網(wǎng)站提供AJAX交互,并且它兼容各種瀏覽器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。FineReport報(bào)表解析后最終成為一個(gè)html頁面,因此可以使用JS對(duì)報(bào)表進(jìn)行各種處理,可以選擇使用jQuery框架的所有方法對(duì)報(bào)表進(jìn)行操作。在此基礎(chǔ)上,FineReport還封裝了很多內(nèi)置的JS方法,這里我就先介紹JS的一些基本使用。
1. 如何使用JS
1.1 報(bào)表模板中使用JS
作用機(jī)理:
設(shè)計(jì)模板時(shí)可以給控件、工具欄按鈕、整個(gè)報(bào)表添加JS事件,每個(gè)事件對(duì)應(yīng)一個(gè)function。當(dāng)報(bào)表轉(zhuǎn)為html頁面時(shí)會(huì)將這些function加到html的頭部head。當(dāng)事件被觸發(fā)時(shí)如點(diǎn)擊按鈕時(shí),或者導(dǎo)出打印報(bào)表時(shí),對(duì)應(yīng)的function就會(huì)被執(zhí)行。
引入現(xiàn)成的JS文件:
單個(gè)模板引入外部JS文件:分頁預(yù)覽、填報(bào)預(yù)覽或者數(shù)據(jù)分析旁的設(shè)置圖標(biāo),然后點(diǎn)擊引用JavaScript;
報(bào)表工程下所有模板統(tǒng)一引入外部JS文件:服務(wù)器>服務(wù)器配置>引用JavaScript。
相對(duì)路徑引用JS:相對(duì)于報(bào)表工程目錄如WebReport,如WebReport\js下有引用的JS文件test.js,則相對(duì)路徑為js/test.js;
絕對(duì)路徑引用JS:如D:\tomcat\webapps\WebReport\WEB-INF\scripts\script.js。
事件編輯界面:
FineReport有統(tǒng)一的事件編輯界面,如按鈕控件設(shè)置>事件編輯>添加點(diǎn)擊事件便可看到事件編輯界面了,如下圖:

1.2 自定義頁面中使用JS
通過獲取iframe中的報(bào)表再使用FineReport的JS方法
如:報(bào)表嵌入在iframe的id為"reportFrame"時(shí),調(diào)用報(bào)表的打印預(yù)覽方法,代碼如下:
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根據(jù)具體情況設(shè)定
6 FR.doURLFlashPrint(url);
7 }
8 </script>
2. JS語法
2.1 普通的JS語法
如在事件編輯里面彈出對(duì)話框,使用alert(要彈出內(nèi)容)即可。
2.2 jQuery語法
jQuery的基礎(chǔ)語法是:$("tr"),美元符號(hào)$定義 jQuery;選擇符("tr")就可以獲取頁面所在行。
更多jQuery方法請(qǐng)參考其官方jQuery Version 1.9.2 API文檔。
2.3 報(bào)表內(nèi)置的JS方法
如何使用報(bào)表內(nèi)部定義好的JS方法,可在事件編輯里面直接調(diào)用,如FR.doURLFlashPrint調(diào)用Flash打印,代碼如下:
1 FR.doURLFlashPrint("http://localhost:8075/WebReport/ReportServer?reportlet=gettingstarted.cpt");
3. 自動(dòng)補(bǔ)全JS
在FineReport設(shè)計(jì)器內(nèi)使用JS語句實(shí)現(xiàn)某功能時(shí),為了避免JS代碼輸入錯(cuò)誤,提供了JS自動(dòng)補(bǔ)全功能,使用方法如下:
3.1 啟動(dòng)自動(dòng)補(bǔ)全功能
設(shè)計(jì)器內(nèi)默認(rèn)不執(zhí)行自動(dòng)補(bǔ)全功能,點(diǎn)擊文件>選項(xiàng)>編輯器設(shè)置,勾選默認(rèn)執(zhí)行該操作前面的復(fù)選框,如下圖:

3.2 修改快捷鍵設(shè)置
設(shè)計(jì)器內(nèi)置JS自動(dòng)補(bǔ)全快捷鍵為ctrl+space,但是電腦不同,設(shè)置的快捷鍵不同,默認(rèn)快捷鍵可能已經(jīng)被占用,此時(shí),需要修改快捷方式,雙擊自動(dòng)補(bǔ)全快捷鍵:ctrl+SPACE,通過鍵盤操作一遍需要的快捷方式,比如說,將自動(dòng)補(bǔ)全的快捷方式更改為ctrl+Q,如下圖,在彈出的快捷方式修改框中,先按住ctrl,然后按下Q鍵,快捷方式即已修改:

3.3 效果查看
隨意選擇一處可以輸入JS語句的地方,比如說,選中單元格,右鍵選擇控件設(shè)置,點(diǎn)擊事件編輯,添加一個(gè)初始化事件,在右側(cè)JS輸入框中輸入con,然后,操作快捷鍵ctrl+Q,在右下角列出所有con開頭的關(guān)鍵字:
