HTML 通过 iframe 嵌套多张模板并设置联动

  • 文档创建者:文档助手1
  • 编辑次数:13次
  • 最近更新:用户K6250878 于 2020-05-28
  • 1. 概述

    1.1 问题描述

    为了实现主子表联动,将页面分成 3 个区域,分别对应三张不同的报表:

    一张主报表:zhu.cpt 和 2 张子报表:zi1.cpt 和 zi2.cpt,互相之间通过超级链接,实现子报表的动态改变值的效果如下图所示:

    123.gif

    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,如下图所示:

    image.png

    将数据集中的,classno 字段拖曳至 B2 单元格中,如下图所示:

    image.png

    2)超级链接

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

    image.png

    3)加载结束事件

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

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

    image.png

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

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

    设置的效果如下图所示:

    image.png

    最终保存模板为 zhu.cpt

    2.3 zi1.cpt 设计

    1)模板设计

    新建工作薄,添加数据集 ds1,SQL 语句为SELECT * FROM STSCORE,如下图所示:

    image.png

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

    image.png

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

    image.png

    2)超级链接

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

    image.png

    3)加载结束事件

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

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

    设置的效果如下图所示:
    image.png

    最终保存模板为 zi1.cpt

    2.4 zi2.cpt 设计

    1)模板设计

    新建工作薄,添加数据集 ds1,SQL 语句为:SELECT * FROM STSCORE,如下图所示:

    image.png

    根据表样中的字段将数据集中的字段拖曳至相应单元格中,只需通过zi1.cpt 传递过来的$stuno参数进行过滤即可,双击 B3 单元格,选择过滤,添加条件:STUDENTNO等于$stuno如下图:

    image.png

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

    3. 附件下载

    点击下载文档中涉及到的附件资源:Enclosure.zip

    附件列表


    主题: 数据准备