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

效果如下图所示（左侧是部门组织树，右侧是左侧某一部门的人员清单）：

有两种方式实现：

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

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

第一种方式可参见 视图树超链接 部分，本篇主要介绍第二种方式。

3.1 左侧组织树

以内置数据库 FRDemo 中的 department 表为例。

1）创建 department 数据集，并基于此创建树数据集 tree。

2）设计框架页面模板

将树数据集tree中的层次列分别拖入B2、B3、B4中。

单元格缩进：单元格左对齐，B3 缩进 20 单位，B4 缩进 40 单位。

设置父格：B3 左父格 B2，B4 左父格 B3。

过滤空行：B3 和 B4 分别进行过滤，过滤条件：REVERSE(ISNULL($$$))。

单元格形态：设置 B2、B3、B4 的形态为数据字典。

隔行变色：对三个单元格设置条件属性，条件：ROW() % 2 = 0。

最终效果如下图所示：

3.2 右侧详细页面

1）新建详细页面的报表，添加数据集 ds1：SELECT * FROM department WHERE did='${did}'。

2）将数据集相关列拖至单元格，如下图所示：

2）在框架页面模板中，合并 D2、D3、D4 单元格，并设置为“网页框”控件。

控件名称：report。

地址：将详细页面数据分析预览时地址栏中“?”及之后的部分复制至此，链接地址为${servletURL}?viewlet=doc/Parameter/[7ec4][7ec7][6811][4f20][53c2]_[8be6][7ec6].cpt&op=view。

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

3.3 组织树传递参数

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

选中 B2、B3、B4 单元格，在右侧点击超级链接>添加javascript脚本：

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

注：因为 URL 中有中文，需要使用 FR.cjkEncode() 函数，否则由于中文乱码导致找不到路径。

4.1 PC 端预览效果

保存报表，框架报表预览方式选择数据分析，查看报表。

4.2 移动端效果预览

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

1）框架页报表

模板效果在线查看请点击：组织树传参_框架.cpt

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

点击下载模板

2）详细页报表

模板效果在线查看请点击：组织树传参_详细.cpt

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

点击下载模板