历史版本8 :HTML通过iframe嵌套多张模板并设置联动 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 问题描述编辑

页面分成 3 个区域，分别对应三张不同的报表，一张主报表和 2 张子报表，互相之间通过超链，实现子报表的动态改变值的效果。

222

2. 实现思路编辑

通过 HTML 嵌套多个 frame，首先在主表的 frame 上展示主表，然后在主表加载完触发加载结束事件，调用 HTML 中定义的 JS 方法，给表 2 赋动态地址 src，表 3 则在表 2 基础上触发加载结束事件调用 JS，动态给表 3 赋 src。

3. 实现步骤编辑

3.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>

3.2 主表设置

（1）模板设计

新建工作薄，添加数据集 ds1，SQL 语句为SELECT * FROM STSCORE。

将数据集中的

classno 字段

拖曳至 B2 单元格中。

（2）超级链接

在主表点击超级链接传值到子表，右击 B2 单元格，超级链接>网页链接，UR L地址则是输入本身模板地址：/webroot/decision/view/report?viewlet=zhu.cpt，链接打开于选择当前窗口，参数则把点击的值传到子模板中，classno=B2，如果不希望模板分页，则可添加参数 op=write，设置如下图：

222

（3）添加加载结束事件

因为不希望分页，则在填报预览下添加加载结束事件，根据个人情况而定是否显示工具栏，在加载结束事件中添加参数 classno=$classno，在公式中使用$classno则可动态获取到点击超级链接的值；

在三个窗口都显示值的情况下，又点击了主表中超级链接，这时就需要清空表 3 中的数据，所以添加参数 stuno=null，传到 HTML 进行判断，清空表 3 数据。

222

在 JS 中判断是否第一次访问主模板，不是则加载完触发 HTML 中定义 JS 方法，代码如下：

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

设置的效果图如下：

222

保存模板为 zhu.cpt。

3.3 表 2 设计

（1）表样设计

新建工作薄，添加数据集 ds1，SQL 语句为SELECT * FROM STSCORE。

根据表样中的字段将数据集中的字段拖曳至相应单元格中，设置B3单元格的左父格为A2。

222

通过主表传递参数$classno，对表 2 进行过滤，进而展示数据，双击 A2 单元格，选择过滤，添加条件：CLASSNO 等于 $classno，如下图：

222
（2）超级链接

跟主表设置基本相同，添加超级链接-网页链接，URL 地址则是输入本身模板地址：/webroot/decision/view/report?viewlet=zi1.cpt，链接打开于选择当前窗口，并把参数传值给本身和表 3 模板中，设置如下：

222

（3）加载结束事件

只要控制表三模板即可，添加参数stuno=$stuno，在 JS 中判断 stuno 不为空的情况下触发 HTML 中的方法，动态把 URL 地址赋值给表 3 模块，JS 代码如下：

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

设置的效果图如下：
222
保存模板为 zi1.cpt。

3.4 表3设计

（1）表样设计

新建工作薄，添加数据集 ds1，SQL 语句为：SELECT * FROM STSCORE。
根据表样中的字段将数据集中的字段拖曳至相应单元格中，只需通过表 2 传递过来的$stuno参数进行过滤即可，双击B3单元格，选择过滤，添加条件：STUDENTNO等于$stuno，如下图：

222
保存模板为 zi2.cpt。
到这里模板设置已完成，启动内置服务器，访问 HTML，在浏览器中输入http://localhost:8075/webapps/webroot/page_demo/frame.html即可查看效果。