反饋已提交

網絡繁忙

當前為10.0版本文檔,更多實例內容將在最新幫助文檔中展現,點選跳轉至 最新版幫助文檔

JS实现折叠树/视图树所有节点一键全部展开或收起

1. 概述

1.1 问题描述

我们制作的复杂折叠树或视图树报表,在以数据分析模式预览时,需要点击父节点,才会展开下一层子节点,当层数比较多的时候,操作比较麻烦。如果用户想实现一键全部展开或收起,如何实现呢?

折叠树:

222

视图树:

222

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 添加事件

1)给「展开」按钮控件添加「点击」事件。如下图所示:

image.png

JavaScript 代码如下:

//展开的最大节点级值
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');
}

2)给「展开」按钮控件添加「点击」事件。如下图所示:image.png

JavaScript 代码如下:

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.1.3 效果预览

保存模板,点击「数据分析」,效果如下图所示:

20180810173528_3359.gif

2.2 视图树示例

2.2.1 添加按钮

打开 %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\widgetReport\singletree.cpt 报表。

A1 单元格单元格添加「视图树控件」,并在参数面板中添加 2 个按钮,删掉「查询按钮,并取消勾选「击查询前不显示报表内容。如下图所示:

image.png

2.2.2 添加事件

1)给「展开按钮」添加一个「点击」事件。如下图所示:

image.png

JavaScript 代码如下:

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

2)给「收起按钮」添加一个「点击」事件。如下图所示:image.png

JavaScript 代码如下:

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

2.2.3 效果预览

保存模板,点击「数据分析」,效果如下所示:

222

3. 模板下载

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

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

附件列表


主題: 原简体文档
已經是第一篇
已經是最後一篇
  • 有幫助
  • 沒幫助
  • 只是瀏覽
  • 圖片不清晰
  • 用語看不懂
  • 功能說明看不懂
  • 操作說明太簡單
  • 內容有錯誤

文 檔回 饋

滑鼠選中內容,快速回饋問題

滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。

不再提示

10s後關閉