JS-based One-Click Expanding or Collapsing of All Nodes in a View Tree

Expected Effect

When previewing a report that contains a complex view tree, you need to click each parent node to expand its child nodes. If multiple layers exist in the view tree, the process can be tedious.

You can achieve a one-click expansion or collapse of all nodes in a view tree, as shown in the following figure.

Implementation Method

You can implement this function by adding two button widgets and attaching JavaScript codes to the widgets.

You can download the template: View Tree Report A.cpt.

Widget Adding

Add two button widgets to the parameter panel, rename them Expand All and Collapse All respectively, and deselect Display Nothing Before Query, as shown in the following figure.

Event Adding

1. Add a Click event to the Expand All button widget, as shown in the following figure.

The JavaScript codes are as follows:

var t = 2;
   for(var m = 1; m <= t; m++) {
      //Expand all nodes in a loop by clicking +.
      $('.fr-tree-elbow-plus').trigger('click');
      $('.fr-tree-elbow-end-plus').trigger('click');
}

2. Add a Click event to the Collapse All button widget, as shown in the following figure.

The JavaScript codes are as follows:

//Set the maximum number of nodes that can be collapsed.
  var t = 2;
   for(var m = 1; m <= t; m++) {
      //Collapse all nodes in a loop by clicking -.
      $('.fr-tree-elbow-minus').trigger('click');
  }
  $('.fr-tree-elbow-end-minus').trigger('click');

Effect Display

Save the template and click Data Analysis Preview. The effect is the same as that shown in section "Expected Effect."

Note:

1. The effect can only be previewed in the Data Analysis Preview or Data Entry Preview mode.

2. The effect cannot be previewed on mobile terminals.

For details, you can download the template JS-based One-Click Expanding or Collapsing of All Nodes in a View Tree.cpt.