html通过frame嵌套多张模板并设置联动

编辑
  • 文档创建者:文档助手1
  • 浏览次数:9536次
  • 编辑次数:8次
  • 最近更新:Kevin-s 于 2019-06-09
  • 1. 问题描述

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



    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,设置如下图:



    (3)添加加载结束事件

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

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


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

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

    设置的效果图如下:


    保存模板为 zhu.cpt

    3.3 表 2 设计

    (1)表样设计

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

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


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


    (2)超级链接

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



    (3)加载结束事件

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

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

    设置的效果图如下:

    保存模板为 zi1.cpt

    3.4 表3设计

    (1)表样设计

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


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


    附件列表


    主题: 部署集成
    标签: 暂无标签 编辑/添加标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]