JS Custom number of layers of tree expansion

1.1 Problem

In the daily report making process, the organization tree format is a very convenient and commonly used display format. But in the process of use, we hope to be able to expand a certain level of tree nodes according to requirements when initializing.

1.2 Solution

Add a tree node button to each level of the organization tree; add a locator, and set the loading end event through JS, determine the location of the locator, and click the tree node button to expand the number of layers.

2.1 Report design

Open report %FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\Report\Group Report\Combo Tree.cpt

Here is a three-layer tree structure, as shown below:

2.2 Set loading end event

Click Menu Template>Template Web Attributes>Data Analysis Settings, and add the loading end event, as shown in the following figure:

JavaScript:

$("#content-container").find("tr").has(".x-treenode-unexpand").each(function(){
    if($(this).children().eq(0).text()==1){ //eq(0) means the leftmost cell; text()==1 means the cell with content 1 grid
        $(this).find(".x-treenode-unexpand").trigger('click');
    }
})

2.3 Add locator

Before the node of the organization tree that needs to be expanded, add a number 1 as a locator. And set the parent cell of the locator and expand with the area.

Note: The locator can be set arbitrarily, but it needs to be consistent with the text() in JS.

Finally, hide column A.

After clicking save, select data analysis preview. The effect is that when the template is opened, only one level of tree nodes is expanded:

2.4 Extra: Expand two-level nodes

If you want to expand two-level nodes, the previous steps are the same, just add a locator in front of the second-level area (ie, cell B7).

As shown in the figure: input the locator in cell A7: 1; similarly set the left parent cell of cell A7 to B7;

Then hide column A. After clicking save, select data analysis preview. 

Combo Tree.cpt