1. 概述
1.1 预期效果
在实际使用过程中,经常会遇到一种架构:左侧显示树状图,右边显示树中某一节点的详细信息。当点击左侧组织树的时候,右边表格随之自动变换。如下图所示:
1.2 实现思路
用户可通过两种方式实现组织树传参:
1)左侧树使用「视图树控件」显示组织树,右侧使用「网页框控件」显示树节点的详细信息。
2)左侧树使用单元格扩展方式实现组织树,右侧使用「网页框控件」显示树节点的详细信息。
第一种方式请参见:视图树超链接,本文主要介绍第二种方式。
2. 示例
2.1 子模板
新建普通报表,命名为「组织树传参_详细」,保存在%FR_HOME%\webroot\WEB-INF\reportlets\doc\Parameter目录下。
2.1.1 新建数据集
新建数据集 ds1,SQL 语句为: SELECT * FROM department WHERE did='${did}' ,如下图所示:
2.1.2 报表设计
报表主体样式,如下图所示:
2.2 主模板
新建普通报表,命名为「组织树传参_框架」,保存在%FR_HOME%\webroot\WEB-INF\reportlets\doc\Parameter目录下。
2.2.1 新建数据集
1)数据集 department
新建数据集 department ,SQL 语句为: SELECT * FROM department,如下图所示:
2)树数据集 Tree
新建树数据集 Tree ,选择内置数据集 department ,并勾选「依赖所选数据集的父标记字段构建树」。
原始标记字段为 did ,父标记字段为 fid ,如下图所示:
2.2.2 设置组织树
1)报表设计
将树数据集 Tree 中的层次列分别拖入 B2、B3、B4 单元格中,如下图所示:
2)单元格缩进
设置 B2、B3、B4 单元格左对齐,B3 单元格缩进 20 ,B4 单元格缩进 40 。如下图所示:
3)设置父格
设置 B3 单元格的左父格为 B2 ,B4 单元格的左父格为 B3 。如下图所示:
4)过滤空行
对 B3 单元格和 B4 单元格分别进行过滤,过滤条件:REVERSE(ISNULL($$$)),如下图所示:
5)单元格形态
设置 B2、B3、B4 单元格的形态为「数据查询」,数据集为「department 」 ,实际值为 「did」 ,显示值为「department 」 。如下图所示:
2.2.3 设置网页框
合并 D2、D3、D4 单元格,并设置为「网页框控件」,如下图所示:
网页框属性如下表所示:
内容 | 值 |
---|---|
控件名称 | report |
地址 | ${servletURL}?viewlet=doc/Parameter/组织树传参_详细.cpt&op=view |
参数 | did=B2,默认将 B2 的值作为参数 did 传递给详细页面 |
2.3 组织树传递参数
该步骤实现左侧点击组织树的某一节点时,右侧详细页面显示该节点的详细信息。
选中 B2、B3、B4 单元格,添加「超级链接>JavaScript 脚本」,设置参数「did=$$$」,如下图所示:
JavaScript 代码如下:
var url = encodeURI(encodeURI("${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