多语言展示
当前在线:1392今日阅读:113今日分享:31

电子表格FineReport教程:[30]动态树报表

下面就通过电子表格FineReport来简单介绍一下动态树报表。
工具/原料
1

电子表格FineReport7.1.1

2

大小:148.2M 适用平台:windows/linux

动态折叠树
1

问题描述在进行展现数据时,希望模板的数据是可以动态折叠的,即点击数据前面的加号才展开对应下面的数据,如下图所示,此时要如何实现呢?

2

实现思路通过将模板设置为组织树报表,然后通过设置树节点按钮,最后通过数据分析预览(&op=view)或者form表单预览(&op=form)即可查看效果。

3

打开模板增加树节点按钮通过设置树节点按钮来实现折叠树,分别右击单元格A1、A2、A3,选择控件设置>按钮,按钮类型选择“树节点按钮”,设置如下:

4

保存与预览保存模板。点击设计器中的数据分析,预览效果即如上。

动态折叠树没有效果的原因
1

问题描述用户设置了折叠树按钮后,预览报表时没有动态树效果。

2

原因:预览模式错误实现动态折叠树必须是以数据分析预览(op=view),而使用分页预览,可以看到没有实现动态折叠树效果,如下图:

双向折叠树并与图表交互
1

问题描述我们有时需要在双向折叠树中显示对应的图表,以方便查看,怎么实现呢?效果如下所示

2

解决方案双向折叠树就是行与列方向都有动态折叠树,动态树节点设置点击事件,将节点值传递给图表,从而实现双向折叠树与图表的交互。

3

建立双向折叠树首先建立一个双向折叠树,动态折叠树的建立参见动态折叠树,双向折叠树需要注意折叠树数据列不可位于同一行或者同一列。

4

设定节点点击事件为了实现双向折叠树与图表的交互,需要设置树节点的点击事件,通过点击事件将树节点的值作为参数传递给图表。以效果图中食品节点为例,说明控件的点击事件设置食品节点事件设置图如下:

5

treenode_lb1()方法作用是传参,内容是:function treenode_lb1(treenode, cv) { if (treenode.selected()) {    if (!window.fr_lb1_param){      window.fr_lb1_param = {};    }    window.fr_lb1_param[cv] = cv; } else {  window.fr_lb1_param[cv] = null; } postParam();}demo.js中还有个方法是关联tree.cpt和tree_chart.cpt两个文档,内容是: FR.doHyperlinkByPost('ReportServer?reportlet=demo/analytics/tree/tree_chart.cpt', {diqu:diqu_str,city:city_str,lb1:lb1_str,lb2:lb2_str,lx1:lx1_str,lx2:lx2_str},'iframe');}

6

图表模板的引入图表模板通过树模板中的一个网页框控件引入,详见tree.cpt。网页框控件属性如下,关联tree_chart.cpt

7

上图中,控件名为空,即默认值iframe,如果设置控件名,则必须与3.2中最后一个方法中的名字对应,如上文是iframe。

推荐信息