帆软报表之 动态报表

动态报表

 

动态树报表

 

动态折叠树

 

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

 

双向折叠树并与图表交互

 

动态折叠树

 

1. 描述

 

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

 

帆软报表之 动态报表

 

2. 实现思路

 

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

 

3. 示例

 

3.1 打开模板

 

打开模板:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\GroupReport\CusGroup_6.cpt,实现方法可参考树数据集实现组织树报表

 

3.2 增加树节点按钮

 

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

 

帆软报表之 动态报表

 

3.3 保存与预览

 

保存模板。点击设计器中的数据分析,预览效果即如上。在线查看示例效果请点击TreeReport.cpt

 

已完成模板请参照%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\SpecialSubject\TreeReport\动态折叠树.cpt

 

由此我们可看出,动态折叠树的设计思路是点击主格时,控制附属于该组的子项内容展开与折叠,由此达到数据分析的效果。

 

注:由于我们是通过按钮控件实现该功能的,而普通的分页预览是不会将控件显示出来,需要在op=view状态即数据分析下才能显示。

 

注:动态折叠树不支持字体颜色设置。

 

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

 

1. 描述

 

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

 

2. 原因一:预览模式错误

 

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

 

帆软报表之 动态报表

 

3. 原因二:聚合报表

 

聚合报表不支持动态折叠树,所以在聚合报表中设置了动态折叠树、数据分析预览时没有动态树效果。

 

4. 原因三:决策报表

 

决策报表中新增报表块不支持控件设置,所以在决策报表中无法达到动态折叠树的效果。

 

双向折叠树并与图表交互

 

1. 描述

 

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

 

帆软报表之 动态报表

 

2. 解决方案

 

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

 

3. 示例

 

参见模板%FR_HOME%\WebReport\WEB-INF\reportlets\demo\basic\双向折叠树并与图表交互子图表.cpt

 

参见模板%FR_HOME%\WebReport\WEB-INF\reportlets\demo\basic\双向折叠树并与图表交互.cpt

 

3.1 建立双向折叠树

 

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

 

3.2 设定节点点击事件

 

为了实现双向折叠树与图表的交互,需要设置树节点的点击事件,通过点击事件将树节点的值作为参数传递给图表。

 

以效果图中食品节点为例,说明控件的点击事件设置

 

食品节点事件设置图如下:

 

帆软报表之 动态报表

 

demo.js详细内容参见%FR_HOME%\webapps\webroot\help\demo.js

 

treenode_lb1()方法作用是传参,内容是:

 

  1. function treenode_lb1(treenode, cv) {  
  2.     if (treenode.selected()) {  
  3.     if (!window.fr_lb1_param){  
  4.         window.fr_lb1_param = {};  
  5.     }  
  6.     window.fr_lb1_param[cv] = cv;  
  7.     } else {  
  8.     window.fr_lb1_param[cv] = null;  
  9.     }  
  10.     postParam();  
  11. }  

 

demo.js中还有个方法是关联双向折叠树并与图表交互子图表.cpt和双向折叠树并与图表交互.cpt两个模板,内容是:

 

  1. FR.doHyperlinkByPost('?viewlet=demo/basic/%e5%8f%8c%e5%90%91%e6%8a%98%e5%8f%a0%e6%a0%91%e5%b9%b6%e4%b8%8e%e5%9b%be%e8%a1%a8%e4%ba%a4%e4%ba%92%e5%ad%90%e5%9b%be%e8%a1%a8.cpt', {diqu:diqu_str,city:city_str,lb1:lb1_str,lb2:lb2_str,lx1:lx1_str,lx2:lx2_str},'IFRAME');  

 

3.3 图表模板的引入

 

图表模板通过树模板中的一个网页框控件引入,详见tree.cpt。

 

网页框控件属性如下,关联:双向折叠树并与图表交互子图表.cpt

 

帆软报表之 动态报表

 

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

 

3.4 图表模板的设置

 

图表模板中,需要设置根据树节点传参的条件设置,具体设置参见%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\basic\双向折叠树并与图表交互.cpt

 

 

 

 

 

上一篇:RESTful 和 XML简述


下一篇:C#|GDI绘制折线图