组织树传参

  • 文档创建者:我从山中来
  • 编辑次数:13次
  • 最近更新:Carly 于 2019-12-26
  • 1. 概述

    1.1 预期效果

    在实际使用过程中,经常会遇到一种架构:左侧显示树状图,右边显示树中某一节点的详细信息。当点击左侧组织树的时候,右边表格随之自动变换。如下图所示:

    222

    1.2 实现思路

    用户可通过两种方式实现组织树传参:

    1)左侧树使用「视图树控件」显示组织树,右侧使用「网页框控件」显示树节点的详细信息。

    2)左侧树使用单元格扩展方式实现组织树,右侧使用「网页框控件」显示树节点的详细信息。

    第一种方式请参见 视图树超链接,本文主要介绍第二种方式。

    2. 示例

    2.1 子模板

    新建普通报表,命名为组织树传参_详细.cpt,保存在%FR_HOME%\webroot\WEB-INF\reportlets\doc\Parameter目录下。

    2.1.1 新建数据集

    新建数据集 ds1,SQL 语句为 SELECT * FROM department WHERE did='${did}' ,如下图所示:

    1577346067235471.png

    2.1.2 报表设计

    报表主体样式,如下图所示:

    1577347795159416.png

    2.2 主模板

    新建普通报表,命名为组织树传参_框架.cpt,保存在%FR_HOME%\webroot\WEB-INF\reportlets\doc\Parameter目录下。

    2.2.1 新建数据集

    1)数据集 department

    新建数据集 department ,SQL 语句为 SELECT * FROM department,如下图所示:

    1577348223907785.png

    2)树数据集 Tree

    新建树数据集 Tree ,选择内置数据集 department ,并勾选依赖所选数据集的父标记字段构建树

    原始标记字段为 did ,父标记字段为 did ,如下表所示:

    1577348978715111.png

    2.2.2 设置组织树

    1)报表设计

    将树数据集 Tree 中的层次列分别拖入 B2、B3、B4 单元格中,如下图所示:

    image.png

    2)单元格缩进

    设置 B2、B3、B4 单元格左对齐,B3 单元格缩进 20 单位,B4 单元格缩进 40 单位。如下图所示:

    1577352301247774.png

    3)设置父格

    设置 B3 单元格的左父格为 B2 单元格,B4 单元格的左父格为 B3 单元格。如下图所示:

    1577352454325187.png

    4)过滤空行

    对 B3 单元格和 B4 单元格分别进行过滤,过滤条件:REVERSE(ISNULL($$$)),如下图所示:

    1577352643708268.png

    5)单元格形态

    设置 B2、B3、B4 单元格的形态为数据字典,数据集为 department ,实际值为 did ,显示值为 department 。如下图所示:

    1577353042595900.png

    2.2.3 设置网页框

    合并 D2、D3、D4 单元格,并设置为「网页框控件」,如下图所示:

    1577351068923262.png

    网页框属性如下表所示:

    内容
    控件名称report
    地址${servletURL}?viewlet=doc/Parameter/组织树传参_详细.cpt&op=view
    参数

    did=B2

    默认将 B2 的值作为参数 did 传递给详细页面

    2.3 组织树传递参数

    该步骤实现左侧点击组织树的某一节点时,右侧详细页面显示该节点的详细信息。

    选中 B2、B3、B4 单元格,添加超级链接>JavaScript 脚本,设置参数did=$$$,如下图所示:

    1577353283578229.png

    JavaScript 代码如下:

    var url = FR.cjkEncode("${servletURL}?viewlet=doc/Parameter/组织树传参_详细.cpt&op=view");
    FR.doHyperlinkByPost(url, {
    did: did
    }, 'REPORT');

    2.4 效果预览

    保存模板,点击数据分析,查看报表,效果如1.1 预期效果所示。

    注:移动端不支持网页框控件。

    注:仅支持数据分析和填报预览方式。

    3. 已完成模板

    1)主模板

    已完成的模板,可参见:%FR_HOME%\webroot\WEB-INF\reportlets\doc\Parameter\组织树传参_框架.cpt

    点击下载模板:组织树传参_框架.cpt

    2)子模板

    已完成的模板,可参见:%FR_HOME%\webroot\WEB-INF\reportlets\doc\Parameter\组织树传参_详细.cpt

    点击下载模板:组织树传参_详细.cpt

    附件列表


    主题: 报表设计
    • 有帮助
    • 没帮助
    • 只是浏览