反馈已提交

网络繁忙

视图树超链

  • 文档创建者:lu123
  • 编辑次数:37次
  • 最近更新:RosieY 于 2021-02-19
  • 1. 概述

    1.1 预期效果

    在设计报表时,希望实现点击左边视图树节点,右边动态显示该节点对应的报表内容,预期效果如下图所示:

    C97DE10A-6696-4026-8BBE-EF30B3494C80.GIF

    1.2 实现思路

    分别制作两张模板,报表 A 和报表 B。报表 A 分为左右两个部分,左边添加「视图树控件」定义视图树,右边添加「网页框控件」显示报表 B。

    给「视图树」控件添加「点击事件」,将选择的值传递给「网页框控件」中的报表 B。

    2. 示例

    2.1 制作报表B 

    可直接打开已经制作完成的模板:%FR_HOME%\webroot\WEB-INF\reportlets\doc\Primary\widgetReport\视图树报表B.cpt

    2.1.1 准备数据

    新建普通报表,新建内置数据集,表设计如下图所示:

    222

    2.2.2 表格设计

    将字段拖入单元格,输入对应的标题,表格样式如下图所示:

    222

    2.2.3 添加过滤

    双击 A2 单元格,给 A2 增加过滤条件,选择数据列「职务」等于公式:sql("FRDemo", "select 部门名称 from 公司部门 where 部门ID='" + p + "'", 1)

    1611035469148263.png

    2.2 制作报表A

    2.2.1 准备数据

    新建普通报表,新建数据库查询 ds1,SQL 查询语句为:SELECT * FROM  公司部门

    Snag_14ba3306.png

    2.2.2 表格设计

    将表格分成两部分,左边放视图树,右边放网页框,如下图所示:

    Snag_14bbda7c.png

    2.2.3 视图树控件设置

     1)在表格左边框添加一个「视图树控件」,并构建树,构建方式选择「自动构建」,步骤如下图所示:

    注:具体方法请参考文档 下拉树控件自动构建示例

    1611038106666836.png

    2)设置控件属性:不勾选「多选」,设置视图树类型为单选视图树。勾选「只返回叶子节点」,不勾选「结果返回完整层次路径」,使其返回数据为当前选中数据,而不是层次路径。如下图所示:

    1611038396686658.png

    3)点击事件设置

    给视图树添加点击事件,输入 JavaScript 代码如下:

    var b = this.getValue();
    var url = encodeURI(encodeURI("${servletURL}?viewlet=doc/Primary/widgetReport/视图树报表B.cpt&__showtoolbar__=false"));
    //超链到 cpt 普通报表或聚合报表时需拼接上 &__showtoolbar__=false
    FR.doHyperlinkByGet(url, {p: b}, 'REPORT');// REPORT 就是网页框的控件名,在 doHyperlinkByGet 方法中必须大写

    注:视图树返回的值类型为数组。

    步骤如下图所示:

    Snag_14d850ec.png

    2.2.4 网页框控件设置

    在表格右边框添加一个「网页框控件」,控件名称必须和上述 JS 代码中一致,为「report」。

    在地址栏输入:${servletURL}?viewlet=doc/Primary/widgetReport/视图树报表B.cpt&__showtoolbar__=false。若初始时表格右边框内不需要显示表格,地址栏也可以不输入。

    注:IE 浏览器下地址栏输入的 URL 中「doc/Primary/widgetReport/视图树报表B.cpt」部分需为预览时 viewlet 后带参数的部分。

    1611040058342567.png

    2.3 效果预览

    保存两张报表,在报表 A 中点击「数据分析」或「填报预览」,效果同 1.1 节预期效果一致。

    2.4 示例扩展

    2.4.1 决策报表中如何实现

    上述示例方法在决策报表中同样适用,设计决策报表时,直接将控件拖入 body 进行设置,但需要先安装 网页框控件插件,具体可参考文档 在决策报表中使用网页框控件 。如下图所示:

    其他步骤完全相同。具体可见附件模板。

    Snag_14f66f11.png

    2.4.2 视图树多选时如何实现

    当视图树控件多选时,视图树需勾选「多选」和「结果返回层次路径」。「网页框」对应的报表中数据集 SQL 内容也随之变化,通过replace()公式和 treelayer()公式将视图树传递的参数拆分开,最后过滤出数据。如下图所示:

    其他设置完全相同,具体可见附件模板。

    3. 注意事项

    3.1 IE浏览器点击树节点报错

    问题描述

    在 IE 浏览器下,点击树节点有时会出现如下报错:

    企业微信截图_16110219682537.png

    原因分析

    制作报表 B 时,添加的过滤条件中使用 sql() 函数定义的参数为 para,模板中 JS 代码则包含 FR.doHyperlinkByGet(url, {para: b}, 'REPORT')。

    使用 IE 浏览器提供的 API 去打开设计器模板中 JS 代码里的 URL 时,若 URL 中含有如链接 https://tool.oschina.net/commons?type=2 中所示的转义字符(比如 &para)时,会导致最终发出的 URL 链接编码异常,从而报错。

    解决方案

    sql() 函数中定义参数时避开上述链接中的转义字符即可,如本文示例定义的参数为 p。

    4. 模板下载

    已完成模板可参见:

    %FR_HOME%\webroot\WEB-INF\reportlets\doc\Primary\widgetReport\视图树报表A.cpt

    %FR_HOME%\webroot\WEB-INF\reportlets\doc\Primary\widgetReport\视图树报表B.cpt

    %FR_HOME%\webroot\WEB-INF\reportlets\doc\Primary\widgetReport\视图树超链-决策报表.frm

    %FR_HOME%\webroot\WEB-INF\reportlets\doc\Primary\widgetReport\视图树多选报表A.cpt

    %FR_HOME%\webroot\WEB-INF\reportlets\doc\Primary\widgetReport\视图树多选报表B.cpt

    视图树报表A.cpt

    视图树报表B.cpt

    视图树超链-决策报表.frm

    视图树多选报表A.cpt

    视图树多选报表B.cpt

    附件列表


    主题: 参数应用
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    在线QQ:800049425

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526

    文 档反 馈

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

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

    不再提示

    10s后关闭