1.1 预期效果

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

1.2 实现思路

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

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

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

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

2.1 子模板

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

2.1.1 新建数据集

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

2.1.2 报表设计

报表主体样式，如下图所示：

2.2 主模板

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

2.2.1 新建数据集

1）数据集 department

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

2）树数据集 Tree

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

原始标记字段为 did ，父标记字段为 did ，如下表所示：

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 单元格，并设置为「网页框控件」，如下图所示：

网页框属性如下表所示：

2.3 组织树传递参数

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

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

JavaScript 代码如下：

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

2.4 效果预览

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

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

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

1）主模板

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

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

2）子模板

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

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