历史版本7 :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单元格,超级链接>网页链接,URL地址则是输入本身模板地址:/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即可查看效果。