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
程式碼內容如下所示：
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 程式碼如下：
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 程式碼如下：
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 在行動端存取即可。
