双向折叠树并与图表交互

编辑
文档创建者:印然 (67260 )     浏览次数:5819次     编辑次数:8次     最近更新:caixiaolan 于 2016-11-07     

目录:

1. 问题描述编辑

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

2. 解决方案编辑

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

3. 示例编辑

参见模板%FR_HOME%\WebReport\WEB-INF\reportlets\demo\analytics\tree\tree.cpt
参见模板%FR_HOME%\WebReport\WEB-INF\reportlets\demo\analytics\tree\tree_chart.cpt
3.1 建立双向折叠树
首先建立一个双向折叠树,动态折叠树的建立参见动态折叠树,双向折叠树需要注意折叠树数据列不可位于同一行或者同一列。
3.2 设定节点点击事件
为了实现双向折叠树与图表的交互,需要设置树节点的点击事件,通过点击事件将树节点的值作为参数传递给图表。
以效果图中食品节点为例,说明控件的点击事件设置
食品节点事件设置图如下:
222
demo.js详细内容参见%FR_HOME%\WebReport\demo.js
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'); }
3.3 图表模板的引入
图表模板通过树模板中的一个网页框控件引入,详见tree.cpt
网页框控件属性如下,关联tree_chart.cpt
222
上图中,控件名为空,即默认值iframe,如果设置控件名,则必须与3.2中最后一个方法中的名字对应,如上文是iframe。
3.4 图表模板的设置

图表模板中,需要设置根据树节点传参的条件设置,具体设置参见%FR_HOME%\WebReport\WEB-INF\reportlets\demo\analytics\tree\tree_chart.cpt

附件列表


主题: 专题总结
如果您认为本文档还有待完善,请编辑

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

此页面有帮助吗?