反馈已提交

网络繁忙

视图树展开

  • 文档创建者:lu123
  • 历史版本:45
  • 最近更新:Carly 于 2023-09-22
  • 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.1.2 表格设计

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

    222

    2.1.3 添加过滤

    双击 A2 单元格,给 A2 增加过滤条件,选择数据列「职务」等于公式:sql("FRDemo", "select 部门名称 from 公司部门 where 部门ID='" + p + "'", 1)这里主要是过滤对应职务的数据,后面视图树将会传递一个参数 p 给网页框,网页框中报表利用 p 过滤数据。

    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 代码如下:

    注:若报表工程安装了「平台内打开新标签页插件」,建议使用 FR.doHyperlinkByPost 传参,否则点击后会跳转到新的窗口打开网页框报表。

    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 效果预览

    2.3.1 PC 端 

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

    2.3.2 移动端

    App 及 HTML5 效果如下图所示:

    2022-08-30_16-46-11.gif

    2.4 示例扩展

    2.4.1 决策报表中如何实现

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

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

    Snag_14f66f11.png

    2.4.2 视图树多选时如何实现

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

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

    3. 模板下载

    已完成模板可参见:

    %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

    4. 注意事项

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

    问题描述

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

    原因分析

    制作报表 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.2 IE内核浏览器无法展开树列表

    问题描述

    在IE内核浏览器,例如edge游览器中,预览决策报表中的视图树时,无法展示树列表。

    解决方案

    1)更换浏览器,推荐使用最新版Chrome浏览器进行预览。

    2)将决策报表转换至旧版。


    附件列表


    主题: 参数应用
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

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

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

    不再提示

    10s后关闭

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