双向折叠树并与图表交互

编辑
  • 文档创建者:印然
  • 浏览次数:7985次
  • 编辑次数:10次
  • 最近更新:Kevin-s 于 2019-06-20
  • 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() 方法作用是传参,内容是:


    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 中还有个方法是关联双向折叠树并与图表交互子图表.cpt双向折叠树并与图表交互.cpt两个模板,内容是:

    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


    附件列表


    主题: 报表应用
    标签: 暂无标签 编辑/添加标签
    如果您认为本文档还有待完善,请编辑

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

    此页面有帮助吗?只是浏览 [ 去社区提问 ]