反馈已提交

网络繁忙

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

  • 文档创建者:文档助手1
  • 历史版本:16
  • 最近更新:Suki陈 于 2023-01-06
  • 1. 概述

    1.1 应用场景

    在 HTML 页面中嵌套多张模板,并实现主子表的联动。

    比如使用一张主报表和 2 张子报表,通过点击超级链接动态改变子报表的值,效果如下图所示:

    123.gif

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

    image.png

    2.2.2 模板设计

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

    image.png

    2.2.3 添加超级链接

    • 选中 B2 单元格,右侧属性面板点击超级链接,新增一个网络链接类型的超级链接。

    • URL地址为主报表地址:/webroot/decision/view/report?viewlet=zhu.cpt

    • 链接打开于:这里选择当前窗口。

    • 新增参数 classno=B2 把点击值传到子模板中,如果不希望模板分页,可添加参数op=write,设置如下图所示:

    image.png

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

    image.png

    2.3.2 模板设计

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

    image.png

    2.3.3 添加过滤条件

    双击 A2 单元格,添加过滤条件:CLASSNO等于参数「$classno」,根据主报表传递的班级号过滤出相应班级的数据。如下图所示:

    image.png

    2.3.4 添加超级链接

    • 选中 B3 单元格,右侧属性面板点击超级链接,新增一个网络链接类型的超级链接。

    • URL地址为自身地址:/webroot/decision/view/report?viewlet=zi1.cpt

    • 链接打开于:这里选择当前窗口。

    • 新增参数stuno=B3 、classno=A2,将参数值传递给自身和子报表 2 ,如果不希望模板分页,可添加参数op=write,设置如下图所示:

    image.png

    2.3.5 设置加载结束事件

    点击菜单「模板>模板Web属性>填报页面设置」,添加一个「加载结束」事件。

    1)添加参数

    添加参数classno=$classno,动态获取超级链接传入的值。

    添加参数stuno=null,通过 JS 判断,实现在 stuno 不为空的情况下触发 HTML 中的方法,动态把 URL 地址赋值给子报表 2 。

    2)添加 JavaScript 代码

    image.png

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

    image.png

    2.4.2 模板设计

    模板样式如下图所示,其中 D2 单元格横向扩展,B3~D3 单元格纵向扩展。

    2.4.3 添加过滤条件

    双击 B3 单元格,添加过滤条件:STUDENTID等于参数「$stuno」,根据子报表 1 传递的学号值过滤出相应学生的数据。如下图所示:

    image.png

    2.5 效果预览

    启动内置服务器,在浏览器中访问http://localhost:8075/webroot/help/page_demo/frame.html,PC 端预览效果如 1.1 节所示。

    支持在移动端查看页面,只需要将上述地址中 localhost 换成服务器 IP,然后通过 URL 在移动端访问即可。

    Screenshot_20220822_174215_com.tencent.wework.jpg

    附件列表


    主题: 部署集成
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持