很多報表軟件可以利用JS接口來實現更多更復雜的功能。以FineReport為例,開放了大量的JS API給用戶,根據執行JS的主體不同可以將分為三大類:FR、FS和contentWindow。
在js語句中執行可以使用FR的方法或者屬性,比如說FR.Msg.alert,FR中的方法比如引入finereport.js。FS的方法可以用于數據決策系統中的js接口,比如說FS.tabPane.addItem。而contentWindow是在web頁面集成的時候,將F報表嵌入在iframe中,調用報表對象時使用的接口,比如說:document.getElementById('reportFrame').contentWindow,其中document.getElementById('reportFrame')是獲取iframe對象,contentWindow是報表對象,相當于html中的window對象。
由于篇幅,這里先介紹FR
FR
大家知道,預覽報表時,報表servlet會將cpt模板轉為html,在這個html的head頭部中會引入FR的js,如下:
<script type="text/javascript" src="/WebReport/ReportServer?op=emb&resource=finereport.js"></script>
這個finereport.js中包含了許多內置的function以及一些公有的屬性,不管在模板中還是其他網頁中,只要引入了finereport.js,就能夠通過FR.xxx的形式調用公有的屬性與方法
比如,在模板中使用,訪問模板時會自動引入finereport.js,因此在模板的js腳本中可以直接使用FR.xxx來調用方法,如下圖:

或者需要在自己的網頁如某個jsp頁面中調用FR的方法,要先引入finereport.js,再通過FR.xxx來調用,如下:
<html>
<head>
<script type="text/javascript" src="/WebReport/ReportServer?op=emb&resource=finereport.js"></script>
<script type="text/javascript">
var url = FR.cjkEncode("/WebReport/ReportServer?reportlet=Gettingstarted.cpt&地區=華東");
window.open(url);
</script>
</head>
<body>
</body>
</html>
對于常用的FR方法,這里列了一張表
方法 | 返回值 | 說明 |
ajax | void | ajax請求 |
cjkDecode(cjkEncode String) | String | 對cjkEncode過的字符串進行反編碼 |
cjkEncode(String) | String | 對字符串進行cjkEncode編碼 |
closeDialog() | void | 關閉對話框 |
doHyperlinkByGet(url,config,target,feature) | void | 超級鏈接,get傳遞config參數到target中,并在feature里面設置窗口屬性 |
doHyperlinkByPost(url,config,target,feature) | void | 超級鏈接,post傳遞config參數,并將結果顯示在target中,并在feature里面設置窗口屬性 |
doURLAppletPrint(printurl,isPopUp,config) | void | applet打印 |
doURLFlashPrint(printurl,isPopUp,config) | void | flasht打印 |
doURLPDFPrint(printurl,isPopUp,config) | void | pdf打印 |
$.isArray(object) | Boolean | 是否為數組,是返回true,否返回false |
isEmpty(object) | Boolean | 是否為空,是返回true,否返回false |
jsonDecode(jsonEncode String) | String | 對jsonEncode過的字符串進行反編碼 |
jsonEncode(String) | String | 對字符串進行jsonEncode編碼 |
showDialog(title, width, height, innerContent) | void | 顯示一個對話框 |
這里主要細講一下Msg和Ajax方法。
1 FR.Msg
FR內置了統一風格的消息框,替代實現了window中的alert、confirm以及prompt。
1.1 FR.Msg.alert方法
使用方法
FR.Msg.alert(title, message, callback),彈出警告框。
title:對話框標題;message:對話框里顯示的提示詳細;callback:點擊確定時調用的方法。
注意,callback是一個function方法,所以在寫callback的時候必須為一個方法。
如在某個控件增加編輯結束事件,JS為:FR.Msg.alert("警告","值錯誤");,在該控件編輯結束后,會看到如下圖所示的對話框:

1.2 FR.Msg.confirm方法
使用方法
FR.Msg.confirm(title, message, callback, min_width),彈出帶有確認和取消按鈕的對話框。
title:對話框標題;message:對話框里顯示的提示詳細;cellback:點擊確定時調用的方法;min_width:表示最小寬度。
如在某個刪除按鈕中增加點擊事件,JS為:FR.Msg.confirm("警告","確認要刪除嗎?");,點擊刪除行時會看到,會看到如下圖所示的對話框:

注意,此方法無法獲取點擊“確定”或“取消”的返回值,此方法主要是觸發回調函數的。若希望通過返回值的不同來進行下面的操作,則可使用window中的confirm
1.3 FR.Msg.prompt方法
使用方法
FR.Msg.prompt(title, message, value, callback, min_width),可以傳遞參數的對話框
title:對話框標題;message:對話框里顯示的提示詳細;callback:點擊確定時調用的方法;Value:參數傳遞的默認值;min_width:表示最小寬度。
如在某個控件增加點擊事件,JS為:FR.Msg.prompt("輸入","愛好","運動");,在該控件被點擊時,會看到如下圖所示的對話框:

1.4 FR.Msg.toast方法
使用方法
FR.Msg.toast(message),報表從頁面右上角彈出來的那個長條形信息。
message:彈出的信息
如給某個模板增加填報成功事件,JS為:FR.Msg.toast("填報成功");,在點擊提交按鈕,提交成功后會看到頁面的右上角彈出如下對話框:

2 FR.ajax
大家知道JS是前端代碼,直接由瀏覽器來執行,不會與服務器進行交互。
通過AJAX,用戶就可以使用JavaScript的XMLHttpRequest對象來直接與服務器進行通信。且在不重載頁面的情況下與Web服務器交換數據,也就是所謂的異步請求。
2.1 調用語法
如下ajax示例:
FR.ajax({
url: "some.jsp",
type: "GET",
data: "p1=a&p2=b",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
2.2 ajax中的選項說明
上例中的url、type、data等都是ajax請求設置時的選項,這些選項都是可選的,以下列出常用選項并說明。
async:Boolean
默認為true,所有請求均為異步請求。如果需要發送同步請求,請將此選項設置為 false。
注:同步請求將鎖住瀏覽器,用戶其它操作必須等待請求完成才可以執行。
complete:Function
請求完成后回調函數(請求成功或失敗之后均調用)。如下:
FR.ajax({
url: "some.jsp",
complete: function(XMLHttpRequest, textStatus){
alert(this.url);
}
});
其中參數為XMLHttpRequest 對象和一個描述成功請求是否成功的字符串(成功textStatus=success,否則為error)。
在function中可以通過this.xxx來調用該ajax請求中的選項值。
data:Object/String
發送到服務器的數據。GET請求中將自動轉換為請求字符串格式,附加在url后。
值必須是Key/Value格式,可以是字符串如"p1=pavalue&p2=p2value",或者是對象如{p1:p1value,p2:p2value}。
dataType:String
預期服務器返回的數據類型。如果不指定,將自動根據HTTP包MIME信息來智能判斷。可用值有:
"xml":返回 XML 文檔
"html":返回純文本HTML信息;包含的script標簽會在插入dom時執行。
"script":返回純文本JavaScript代碼。
"json":返回JSON數據。
"text"返回純文本字符串。
error:Function
請求失敗時調用此函數。如下:
FR.ajax({
url: "some.jsp",
error: function(XMLHttpRequest, textStatus, errorThrown){
alert(this.url);
}
});
其中參數為XMLHttpRequest 對象、錯誤信息、捕獲的異常對象。
通常textStatus和errorThrown之中只有一個會包含信息。
success:Function
請求成功后的回調函數,如下:
FR.ajax({
url: "/WebReport/a.html",
success: function(data, textStatus){
alert(this.url);
}
});
其中data為服務器返回的,并根據dataType參數進行處理后的數據。textStatus為狀態值sucess。
timeout:Number
設置請求超時時間(毫秒)。此設置將覆蓋全局設置。
ype:String
請求方式POSTGET,默認為GET。
url:String
發送請求的地址。
關于FS和contentWindow,會在下一節介紹。