HTML透過iframe巢狀多張範本並設定聯動- FineReport帮助文档

1. 概述

1.1 應用場景

在 HTML 頁面中巢狀多張範本，並實現主子表的聯動。

比如使用一張主報表和 2 張子報表，透過點選超級連結動態改變子報表的值，效果如下圖所示：

1.2 實現思路

在 HTML 中可以透過定義 frameset 標籤來組織多個視窗，並在 frame 中設定特定的視窗區域，最終透過 JS 判斷實現對不同視窗區域設定不同的範本地址。

實現程式如下：

1）首先在主報表的 frame 上展示主表。

2）主報表載入完成後觸發載入結束事件，呼叫 JS 根據超級連結傳入值動態指派 URL 地址給子報表 1 。

3）子表 1 載入完成後觸發載入結束事件，呼叫 JS 根據超級連結傳入值動態指派 URL 地址給子報表 2 。

2. 範例

2.1 建立 HTML 頁面

建立 HTML 檔案，命名為 frame.html，放到工程%FR_HOME%\webapps\webroot\help\page_demo路徑下。

點選下載並解壓獲取檔案：frame.zip

程式碼內容如下所示：

<HTML>
<HEAD>
<TITLE>New Document</TITLE>
<script type="text/javascript"> 
//在主範本載入結束事件觸發zhu(classno)方法，並把classno傳到html
function zhu(classno) {
var classno = classno;
//把獲取參數classno指派給表2範本
var zi1 = "/webroot/decision/view/report?viewlet=zi1.cpt&op=write&__showtoolbar__=false&classno=" + classno;
document.getElementById("zi1").src = zi1;
   }
   //主範本和表2範本載入完觸發aa(stuno)方法
   function aa(stuno) {
   var stuno = stuno;
   //如果stuno為空的時候，則表3視窗指派為空，不為空則動態給表3範本設定url
   if(stuno == 'null')
   {
var reportURL = "";
document.getElementById("zi2").src = reportURL;
   return false;
   }else{
var reportURL = "/webroot/decision/view/report?viewlet=zi2.cpt&op=write&__showtoolbar__=false&stuno=" + stuno;
document.getElementById("zi2").src = reportURL;
   }
   }
  </script>
<base target="browserframe" />
</HEAD>
<frameset rows="40%,60%">
<frame id="reportFrame" name="reportFrame"
src="/webroot/decision/view/report?viewlet=zhu.cpt&op=write"></frame>
<frameset name="zi" cols="35%,65%">
<frame id="zi1" name="zi1" title="zi1" src="">
<frame id="zi2" src="">
</frameset>
</frameset>
<body>
</body>
</HTML>

2.2 製作主報表

點選下載獲取檔案：zhu.cpt

並將檔案儲存到%FR_HOME%\webapps\webroot\WEB-INF\reportlets下。

2.2.1 資料準備

建立資料集 ds1，SQL 語句為：SELECT * FROM STSCORE，如下圖所示：

2.2.2 範本設計

將資料集中的 classno 欄位拖曳至 B2 儲存格中，如下圖所示：

2.2.3 新增超級連結

選中 B2 儲存格，右側屬性面板點選超級連結，新增一個網路連結類型的超級連結。
URL地址為主報表地址：/webroot/decision/view/report?viewlet=zhu.cpt
連結開啟於：這裏選擇當前視窗。
新增參數 classno=B2 把點選值傳到子範本中，如果不希望範本分頁，可新增參數op=write，設定如下圖所示：

2.2.4 設定載入結束事件

點選選單「範本>範本Web屬性>填報頁面設定」，新增一個「載入結束」事件。

1）新增參數

新增參數classno=$classno，動態獲取超級連結傳入的值。

新增參數stuno=null，當再次點選主報表中超級連結時，透過該參數傳值到 HTML 進行判斷，清空子報表 2 中的資料。

2）新增 JavaScript 程式碼

在 JS 中判斷是否為第一次存取主範本，不是則載入完觸發 HTML 中定義的 JS 方法。

JavaScript 程式碼如下：

if(classno != 'null'){
var zhu = parent.window;
zhu.zhu(classno);
zhu.aa(stuno);
}

2.3 製作子報表1

點選下載獲取檔案：zi1.cpt

並將檔案儲存到%FR_HOME%\webapps\webroot\WEB-INF\reportlets下。

2.3.1 資料準備

建立資料集 ds1，SQL 語句為：SELECT * FROM STSCORE，如下圖所示：

2.3.2 範本設計

根據表樣中的欄位將資料集中的欄位拖曳至相應儲存格中，設定 B3 儲存格的左父格為 A2。

2.3.3 新增過濾條件

雙擊 A2 儲存格，新增過濾條件：CLASSNO等於參數「$classno」，根據主報表傳遞的班級號過濾出相應班級的資料。如下圖所示：

2.3.4 新增超級連結

選中 B3 儲存格，右側屬性面板點選超級連結，新增一個網路連結類型的超級連結。
URL地址為自身地址：/webroot/decision/view/report?viewlet=zi1.cpt
連結開啟於：這裏選擇當前視窗。
新增參數stuno=B3 、classno=A2，將參數值傳遞給自身和子報表 2 ，如果不希望範本分頁，可新增參數op=write，設定如下圖所示：

2.3.5 設定載入結束事件

點選選單「範本>範本Web屬性>填報頁面設定」，新增一個「載入結束」事件。

1）新增參數

新增參數classno=$classno，動態獲取超級連結傳入的值。

新增參數stuno=null，透過 JS 判斷，實現在 stuno 不為空的情況下觸發 HTML 中的方法，動態把 URL 地址指派給子報表 2 。

2）新增 JavaScript 程式碼

JavaScript 程式碼如下：

if(stuno != 'null'){
var zhu = parent.window;
zhu.aa(stuno);
}

2.4 製作子報表2

點選下載獲取檔案：zi2.cpt

並將檔案儲存到%FR_HOME%\webapps\webroot\WEB-INF\reportlets下。

2.4.1 資料準備

建立資料集 ds1，SQL 語句為：SELECT * FROM STSCORE，如下圖所示：

2.4.2 範本設計

範本樣式如下圖所示，其中 D2 儲存格橫向擴展，B3～D3 儲存格縱向擴展。

2.4.3 新增過濾條件

雙擊 B3 儲存格，新增過濾條件：STUDENTID等於參數「$stuno」，根據子報表 1 傳遞的學號值過濾出相應學生的資料。如下圖所示：

2.5 效果預覽

啟動內建伺服器，在瀏覽器中存取http://localhost:8075/webroot/help/page_demo/frame.html，PC 端預覽效果如 1.1 節所示。

支援在行動端查看頁面，只需要將上述地址中 localhost 換成伺服器 IP，然後透過 URL 在行動端存取即可。

Screenshot_20220822_174215_com.tencent.wework.jpg

上一篇：web頁面整合簡單範例

下一篇：iframe 框架自適應報表高度

有幫助
沒幫助
只是瀏覽
圖片不清晰
用語看不懂
功能說明看不懂
操作說明太簡單
內容有錯誤

中文（简体） English 日本語

中文（繁體）

HTML透過iframe巢狀多張範本並設定聯動

1. 概述

1.1 應用場景

1.2 實現思路

2. 範例

2.1 建立 HTML 頁面

2.2 製作主報表

2.2.1 資料準備

2.2.2 範本設計

2.2.3 新增超級連結

2.2.4 設定載入結束事件

2.3 製作子報表1

2.3.1 資料準備

2.3.2 範本設計

2.3.3 新增過濾條件

2.3.4 新增超級連結

2.3.5 設定載入結束事件

2.4 製作子報表2

2.4.1 資料準備

2.4.2 範本設計

2.4.3 新增過濾條件

2.5 效果預覽

附件列表