CSS Modify Drop-down Tree Icon-FineReport Help Document

Last update： 2020-12-16

I. Overview

1.1 Requirement

How to customize the icons of options in a drop-down tree?

1.2 Solution

Use CSS to change the background image for a <class> element of any option in the drop-down tree.

II. Sample

2.1 Settings of the parameter interface

Open the parameter pane, add a Drop-down Tree widget and name it p1:

2.2 Settings of the Drop-down Tree widget

Click the drop-down tree widget p1 to configure settings of [Data Dictionary]. Set [Build Way] to [Basic Layered Build] and then click Gradation 1 and Gradation 2 respectively for setting.

Configure the followings settings for Gradation 1: [Type: Data Query], [Dataset: ds1], [Actual Value: CLASSNO], [Display Value: CLASSNO], as shown below:

Configure the followings settings for Gradation 2: [Type: Data Query], [Dataset: ds2], [Actual Value: NAME], [Display Value: NAME], as shown below:

2.3 Reference CSS

1) Create a new folder under the directory \webapps\webroot\help\css and name it custom.

2) Store images 1.png and 2.png in the custom folder to replace the default icons as you want and create a new file named custom_tree.css in the custom folder as well.

3) custom_tree.css is referenced to restyle the drop-down tree:

.fr-tree-node-leaf .fr-tree-node-icon{
background:url("1.png");
background-size:100% 100%;
}
 
.fr-tree-node-expanded .fr-tree-node-icon{
background:url("2.png");
background-size:100% 100%;
}

.fr-tree-node-collapsed .fr-tree-node-icon{
background:url("2.png");
background-size:100% 100%;
}

Note: Here the image path is relative. You can also display the image from an absolute path: http://localhost:8075/webroot/help/css/custom/1.png.

4）Reference CSS

Click [Template]-[Web Attributes]-[Reference CSS], select [Disk File: custom_tree.css], click [Add] and then [OK].