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

编辑
  • 文档创建者:gxy120313
  • 浏览次数:4678次
  • 编辑次数: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


    附件列表


    主题: 二次开发
    标签: 暂无标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]