CSS 修改下拉树图标

  • 文档创建者:gxy120313
  • 编辑次数:12次
  • 最近更新:Carly 于 2019-09-17
  • 1. 描述

    1.1 问题描述

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

    1568685087512494.png

    1.2 思路

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

    2. 操作步骤

    2.1  新建数据集

    新建两个数据集:

    ds1:SELECT * FROM STSCORE

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

    2.2  定义参数

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

    222

    2.3  参数界面设置

    1)打开参数面板,点击右侧控件设置面板中的全部添加按钮:

    222

    222

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

    222

    222

    2.4  下拉树控件设置

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

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

    222

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

    222

    2.5  引用 CSS 更换图标

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

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

    222

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

    222

    3)custom_tree.css 是替换树的样式的,具体内容为:

    .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%;
    }

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

    4)引用 CSS 文件

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

    222

    3. 预览效果

    3.1 PC 端

    1568685535611049.png

    3.2 移动端

    注:不支持移动端。

    4. 已完成模板

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

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

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


    附件列表


    主题: 二次开发
    • 有帮助
    • 没帮助
    • 只是浏览