Web報表工具FineReport的JS API開發（一）

時間 2019-11-09

標籤 web 報表工具 finereport api 開發欄目 HTML 简体版

原文原文鏈接

不少報表軟件能夠利用JS接口來實現更多更復雜的功能。以FineReport爲例，開放了大量的JS API給用戶，根據執行JS的主體不一樣能夠將分爲三大類：FR、FS和contentWindow。javascript

在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對象。html

因爲篇幅，這裏先介紹FR前端

FRjava

你們知道，預覽報表時，報表servlet會將cpt模板轉爲html，在這個html的head頭部中會引入FR的js，以下：web

Js代碼 ajax

<script type="text/javascript" src="/WebReport/ReportServer?op=emb&resource=finereport.js"></script>

這個finereport.js中包含了許多內置的function以及一些公有的屬性，無論在模板中仍是其餘網頁中，只要引入了finereport.js，就可以經過FR.xxx的形式調用公有的屬性與方法json

好比，在模板中使用，訪問模板時會自動引入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>

這裏主要細講一下Msg和Ajax方法。dom

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，會在下一節介紹。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。