1. 概述
1.1 問題描述
爲了實現主子表聯動，将頁面分成 3 個區域，分别對應三張不同的報表：
一張主報表：zhu.cpt 和 2 張子報表：zi1.cpt 和 zi2.cpt，互相之間通過超級鏈接，實現子報表的動态改變值的效果如下圖所示：
1.2 實現思路
通過 HTML 嵌套多個 frame，首先在主表的 frame 上展示主表，然後在主表加載完觸發加載結束事件，調用 HTML 中定義的 JS 方法，給表 2 賦動态地址 src，表 3 則在表 2 基礎上觸發加載結束事件調用 JS，動态給表 3 賦 src。
2. 操作步驟
2.1 制作 HTML 頁面
在\webapps\webroot\help\page_demo文件夾中新建一個 HTML 頁面 frame.html，在 HTML 中定義 frameset 标簽，組織多個窗口，通過 frame 設置特定的窗口區域，通過 JS 判斷對不同窗口區域設置不同模板地址，詳細代碼如下：
<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 設計
1）模板設計
新建工作薄，添加數據集 ds1，SQL 語句爲SELECT * FROM STSCORE，如下圖所示：
将數據集中的，classno 字段拖曳至 B2 單元格中，如下圖所示：
2）超級鏈接
在主表點擊超級鏈接傳值到子表，右擊 B2 單元格，超級鏈接>網頁鏈接，UR L地址則是輸入本身模板地址：/webroot/decision/view/report?viewlet=zhu.cpt，鏈接打開於選擇當前窗口，參數則把點擊的值傳到子模板中，classno=B2，如果不希望模板分頁，則可添加參數 op=write，設置如下圖所示：
3）加載結束事件
因爲不希望分頁，則在填報預覽下添加加載結束事件，根據個人情況而定是否顯示工具欄，在加載結束事件中添加參數 classno=$classno，在公式中使用$classno則可動态獲取到點擊超級鏈接的值；
在三個窗口都顯示值的情況下，又點擊了主表中超級鏈接，這時就需要清空表 3 中的數據，所以添加參數 stuno=null，傳到 HTML 進行判斷，清空表 3 數據。
在 JS 中判斷是否第一次訪問主模板，不是則加載完觸發 HTML 中定義 JS 方法，代碼如下：
if(classno != 'null'){
var zhu = parent.window;
zhu.zhu(classno);
zhu.aa(stuno);
}設置的效果如下圖所示：
最終保存模板爲 zhu.cpt。
2.3 zi1.cpt 設計
1）模板設計
新建工作薄，添加數據集 ds1，SQL 語句爲SELECT * FROM STSCORE，如下圖所示：
根據表樣中的字段将數據集中的字段拖曳至相應單元格中，設置B3單元格的左父格爲A2。
通過主表傳遞參數$classno，對表 2 進行過濾，進而展示數據，雙擊 A2 單元格，選擇過濾，添加條件：CLASSNO 等於 $classno，如下圖：
2）超級鏈接
跟主表設置基本相同，添加超級鏈接-網頁鏈接，URL 地址則是輸入本身模板地址：/webroot/decision/view/report?viewlet=zi1.cpt，鏈接打開於選擇當前窗口，并把參數傳值給本身和表 3 模板中，設置如下：
3）加載結束事件
只要控制表三模板即可，添加參數stuno=$stuno，在 JS 中判斷 stuno 不爲空的情況下觸發 HTML 中的方法，動态把 URL 地址賦值給表 3 模塊，JS 代碼如下：
if(stuno != 'null'){
var zhu = parent.window;
zhu.aa(stuno);
}設置的效果如下圖所示：
最終保存模板爲 zi1.cpt。
2.4 zi2.cpt 設計
1）模板設計
新建工作薄，添加數據集 ds1，SQL 語句爲：SELECT * FROM STSCORE,如下圖所示：
根據表樣中的字段将數據集中的字段拖曳至相應單元格中，只需通過zi1.cpt 傳遞過來的$stuno參數進行過濾即可，雙擊 B3 單元格，選擇過濾，添加條件：STUDENTNO等於$stuno，如下圖：
最終保存模板爲 zi2.cpt。
到這裏模板設置已完成，啓動内置服務器，訪問 HTML，在浏覽器中輸入http://localhost:8075/webroot/help/page_demo/frame.html即可查看效果。
3. 附件下載
點擊下載文檔中涉及到的附件資源：Enclosure.zip
