CSS 修改下拉树图标

1. 描述
1.1 问题描述

在实际项目中，FineReport 设计器自带的下拉树控件的图标，有时候可能不满足用户的需求，那么该如何修改下拉树的图标呢？下图的效果是如何实现的呢？

1.2 思路

通过 CSS 修改下拉树中选项对应的 class 的背景图片。

2. 操作步骤
2.1  新建数据集

新建两个数据集：

ds1：SELECT * FROM STSCORE

ds2：SELECT * FROM STSCORE where CLASSNO = '${layer1}'

2.2  定义参数

打开菜单模板>模板参数，添加一个模板参数 p1，如下图所示：

2.3  参数界面设置

1）打开参数面板，点击右侧控件设置面板中的全部添加按钮：

2）将标签控件的控件值设置为姓名查询：未定义的 p1 控件设置为下拉树控件，如下图所示：

2.4  下拉树控件设置

点击下拉树控件 p1，设置数据字典，构建方式选择普通分层构建，有两层。

第一层设置：数据设置选择数据查询，数据集选择 ds1，实际值和显示值都选择列名：CLASSNO，如下图所示：

第二层设置：数据设置选择数据查询，数据集选择 ds2，实际值和显示值都选择列名：NAME，如下图所示:

2.5  引用 CSS 更换图标

1）在\webapps\webroot\help\css目录下新建一个文件夹，文件夹名为 custom，如下图所示：

点击下载 custom 文件夹：custom.rar

2）在 custom 文件夹下放入所用到的名为 1.png、2.png 的图片（图片是所要替换的图标，可以自行下载定义），并在 custom 文件夹下新建一个名为 custom_tree.css 的文件，如下图所示：

3）custom_tree.css 是替换树的样式的，具体内容为：

1. .fr-tree-node-leaf .fr-tree-node-icon{
   
2.         background:url("1.png");
   
3.         background-size:100% 100%;
   
4. }
   
5. 
   
6. .fr-tree-node-expanded .fr-tree-node-icon{
   
7.         background:url("2.png");
   
8.         background-size:100% 100%;
   
9. }
   
10. 
    
11. .fr-tree-node-collapsed .fr-tree-node-icon{
    
12.         background:url("2.png");
    
13.         background-size:100% 100%;
    
14. }

复制代码

注：此处引用图片使用的是相对路径，也可以写出绝对路径，如：http://localhost:8075/webroot/help/css/custom/1.png。

4）引用 CSS 文件

点击模板>报表 Web 属性>引用 CSS，选择custom_tree.css 文件，点击增加，再点击确定即可。

3. 预览效果3.1 PC 端

3.2 移动端

注：不支持移动端。

4. 已完成模板

已完成的模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\CSS样式\03-引用CSS文件改变下拉树图标.cpt

点击下载模板：03-引用CSS文件改变下拉树图标.cpt

点击下载 custom 文件夹：custom.rar

很好的文章