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

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。