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 在移动端访问即可。
