CSS Implements Drop-down Tree Directory

1.1 Requirement

How to create a drop-down tree directory with CSS:

1.2 Solution

Use the Tree Node Button widget and Reference CSS to create a drop-down tree directory.

2.1 Design a report

1) Drag data fields main, sub and sub2 of the built-in dataset into B3, B4 and B5 respectively. Add a Tree Node Button widget to B3, B4 and B5 respectively.

2）Set B3 as the left parent cell of B4 and set B4 as the left parent cell of B5.

2.2 Reference CSS

1）Unzip the image file image.zip of the drop-down tree button to the directory %FR_HOME%\webroot\scripts\css.

2）Add a tree.css file to the directory FineReport_10.0\webapps\webroot\scripts\css by inputting the following codes:

.x-treenode-expand {
    background: transparent url('/webroot/scripts/css/5.jpg') no-repeat scroll left center;
    padding-left: 40px; 
}
.x-treenode-unexpand {
    background: transparent url('/webroot/scripts/css/4.jpg') no-repeat scroll left center;
    padding-left: 40px;
}
.x-text {
    color: #FFFFFF;
}

3）In the Designer, select [Template]-[Web Attributes]-[Reference Css] to import a Css file.

2.3 Preview

Save the template and select [Data Analysis]. The preview effect is shown as below:

3.1 Template

Modify the style of the drop-down tree.cpt

3.2 Image

image.zip

3.3 Css file

tree.css

Refer to the original link: https://help.fanruan.com/finereport/doc-view-2921.html