JS Collapse or expand all tree nodes in one click

1.1 Problem

For the complex folding tree or view tree report we made, when previewing in the data analysis mode, you need to click the parent node to expand the next level of child nodes. When there are many levels, the operation is more troublesome.

If the user wants to expand or collapse all in one click, how to do it?

1.2 Solution

You can add 2 buttons, and then add click events to the buttons to achieve the corresponding functions.

2.1 Add button

Open  %FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\Report\Group Report\Combo Tree.cpt  and add 2 buttons.

2.2 Set the click event

Add click events to the "unfold" and "fold" buttons respectively:

1) Expand JS:

//Expanded maximum node level value
var t = 3; 
for(var m = 1; m <= t; m++) {
//Loop execute the "+" sign to expand
    $('.x-treenode-unexpand').trigger('click');
}
for(var n = 1; n <= 2; n++) {
//Perform the click twice (the subscript starts from 0), and the first element with the style "fr-widget-click", position the cursor
    $('.fr-widget-click').eq(0).trigger('click');
}

2) Collapse JS:

var t = 3;
for(var m = 1; m <= t; m++) {
//Loop execute the "-" sign to collapse
    $('.x-treenode-expand').trigger('click');
}
for(var n = 1; n<= 2; n++){
//Perform the click twice (the subscript starts from 0), and the first element with the style "fr-widget-click", position the cursor
$('.fr-widget-click').eq(0).trigger('click');

2.3 Preview effect

Save the template, click the data analysis preview, the effect on PC is as follows:

Combo Tree.cpt