引用CSS文件改变下拉树图标

1. 描述
3. 操作步骤
4. 预览效果
5. 已完成模板

1. 描述

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

2. 思路

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

3. 操作步骤

3.1 新建数据集

新建两个数据集：

ds1：SELECT * FROM STSCORE

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

3.2 定义参数

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

3.3 参数界面设置

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

姓名查询：，未定义的p1控件设置为下拉树控件，如下图：

3.4 下拉树控件设置

点击下拉树控件p1，设置数据字典，构建方式选择普通分层构建，有两层，第一层设置：数据设置选择数据查询，数据集选择ds1，实际值和显示值都选择列名：CLASSNO，如下图：

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

3.5 引用CSS更换图标

1）在\WebReport\css目录下新建一个文件夹，文件夹名为custom，如下图：

custom_tree.css的文件，如下图：

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

.fr-tree-node-leaf .fr-tree-node-icon{ background:url("http://localhost:8075/WebReport/css/custom/1.png"); background-size:100% 100%; } .fr-tree-node-expanded .fr-tree-node-icon{ background:url("http://localhost:8075/WebReport/css/custom/2.png"); background-size:100% 100%; } .fr-tree-node-collapsed .fr-tree-node-icon{ background:url("http://localhost:8075/WebReport/css/custom/2.png"); background-size:100% 100%; }

4）引用CSS文件

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