帆软层级树一键展开、合并

浅浅的花香味﹌ 2022-12-10 07:14 491阅读 0赞

## 1. 概述 ##

### 1.1 问题描述 ###

我们制作的复杂折叠树或视图树报表，在以数据分析模式预览时，需要点击父节点，才会展开下一层子节点，当层数比较多的时候，操作比较麻烦。

如果用户想实现一键全部展开或收起，如何实现呢？

如图一(折叠树)：

![222][]

如图二(视图树)：

![222][222 1]

### 1.2 实现思路 ###

可以添加 2 个按钮，再通过给按钮添加点击事件来实现对应的功能。

## 2.示例 ##

### 2.1 示例一 ###

2.1.1 添加按钮

打开 %FR\_HOME%\\webapps\\webroot\\WEB-INF\\reportlets\\demo\\basic\\复杂折叠树.cpt 报表，并添加 2 个按钮。

如图：

![image.png][]

2.1.2 设置点击事件

分别给“展开”、“收起”按钮添加点击事件，

A、展开 JS：  
![image.png][image.png 1]

//展开的最大节点级值

var t = 3; 
    for(var m = 1; m <= t; m++) {
    //循环执行“+”号展开
        $('.x-treenode-unexpand').trigger('click');
    }
    for(var n = 1; n <= 2; n++) {
    //执行点击2次(下标从0开始)第1个样式为“fr-widget-click”的元素，定位光标
        $('.fr-widget-click').eq(0).trigger('click');
    }

B、收起 JS：

![image.png][image.png 2]

var t = 3;
    for(var m = 1; m <= t; m++) {
    //循环执行“-”号收起
        $('.x-treenode-expand').trigger('click');
    }
    for(var n = 1; n<= 2; n++){
    //执行点击2次(下标从0开始)第1个样式为“fr-widget-click”的元素，定位光标
    $('.fr-widget-click').eq(0).trigger('click');
    }

### 2.2 示例二 ###

2.2.1 添加按钮

打开 %FR\_HOME%\\webapps\\webroot\\WEB-INF\\reportlets\\doc\\Primary\\widgetReport\\singletree.cpt 报表。将参数区地区控件视图树放置到 A1 单元格，并在参数区添加 2 个按钮（收起、展开），删掉原【查询】按钮，并设置不勾选【点击查询前不显示报表内容】。

如图：  
![image.png][image.png 3]

2.2.2 设置点击事件

分别给“展开”、“收起”按钮添加点击事件，

A、展开 JS：

![image.png][image.png 4]

//展开的最大节点级值  
    var t = 2;   
    for(var m = 1; m <= t; m++) {  
        //循环执行“+”号展开  
        $('.fr-tree-elbow-plus').trigger('click');  
    }  
    $('.fr-tree-elbow-end-plus').trigger('click');

B、收起 JS：  
![image.png][image.png 5]

//展开的最大节点级值  
    var t = 2;   
    for(var m = 1; m <= t; m++) {  
        //循环执行“+”号展开  
        $('.fr-tree-elbow-minus').trigger('click');  
    }  
    $('.fr-tree-elbow-end-minus').trigger('click');

### 2.3 预览效果 ###

2.3.1 示例一

保存模板，点击数据分析预览，PC 端效果如下所示：

![222][222 1]

2.3.2 示例二

保存模板，点击数据分析预览，PC 端效果如下所示：

![222][222 1]

## 3. 模板下载 ##

### 3.1 示例一 ###

已完成的模板，可参见：%FR\_HOME%\\webapps\\webroot\\WEB-INF\\reportlets\\doc\\JS\\数据分析JS实例\\02-JS实现折叠树/视图树所有节点一键全部展开或收起.cpt

点击下载模板：[JS实现折叠树/视图树所有节点一键全部展开或收起.cpt][JS_.cpt]

[222]: /images/20221123/238eff2930dd4e2baee5432bff3a2bd2.png
[222 1]: /images/20221123/b09df745c1ff437a861fc63522fd9b5e.png
[image.png]: /images/20221123/2a026525fa174e99aa6d502e236db087.png
[image.png 1]: /images/20221123/4cbb81e769c74a63ae30f06c67c2a3e7.png
[image.png 2]: /images/20221123/adfd038e27d4462492a93b9701191e56.png
[image.png 3]: /images/20221123/13a7158e31ec41cba1fe3e27c585bd84.png
[image.png 4]: /images/20221123/e8c85e8d92444350bc94027f690d85d7.png
[image.png 5]: /images/20221123/7087cd8e7307404e85eb72cdaa410a2b.png
[JS_.cpt]: https://help.fanruan.com/finereport/doc-download-/uploads/file/20200317/%E5%A4%8D%E6%9D%82%E6%8A%98%E5%8F%A0%E6%A0%91.cpt