组织树传参

编辑
文档创建者:我从山中来 (73598 )     浏览次数:5292次     编辑次数:8次     最近更新:yinli1989 于 2018-08-16     

目录:

1. 描述编辑

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

效果如下图所示(左侧是部门组织树,右侧是左侧某一部门的人员清单):
222

2. 思路编辑

有两种方式实现:

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

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

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

3. 操作步骤编辑

3.1 左侧构建组织树

以自带数据连接FRDemo中的department表为例。

1)创建department数据集,并基于此创建树数据集tree;

222

2)设计框架页面模板

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

222

单元格缩进:单元格左对齐,B3缩进20单位,B4缩进40单位;

设置父格:B3左父格B2,B4左父格B3;

过滤空行:B3和B4分别进行过滤,过滤条件:REVERSE(ISNULL($$$))

222

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

222

隔行色:对三个单元格设置条件属性,条件:ROW() % 2 = 0

222

最终效果:

222

3.2 右侧详细页面

1)新建详细页面的报表,添加数据集ds1:SELECT * FROM department WHERE did='${did}'

2)将数据集相关列拖至单元格,如下图:

222

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

控件名称:report;

地址:详细页面预览时地址栏中“?”及之后的部分复制至此,链接地址为?reportlet=doc/Parameter/[7ec4][7ec7][6811][4f20][53c2]_[8be6][7ec6].cpt&op=view

注:中文命名的模板需要输入编码后的链接地址。

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

222

3.3 组织树传递参数

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

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

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

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

222

4. 效果预览编辑

4.1 PC端预览效果

222

4.2 移动端效果预览

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

5. 已完成模板编辑

1)框架页报表

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

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

2)详细页报表

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

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



附件列表


主题: 报表应用
如果您认为本文档还有待完善,请编辑

文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

此页面有帮助吗?