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

编辑
文档创建者:gxy120313 (61073 )     浏览次数:2262次     编辑次数:9次     最近更新:jiangsr 于 2018-09-07     

目录:

1. 描述编辑

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

222   222

2. 思路编辑

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

3. 操作步骤编辑

3.1  新建数据集

新建两个数据集:

ds1:SELECT * FROM STSCORE

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

3.2  定义参数

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

222

3.3  参数界面设置

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

222

222

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

222

222

3.4  下拉树控件设置

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

222

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

222

3.5  引用CSS更换图标

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

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.6 效果查看

预览模板,即可看到描述中的效果。

4. 预览效果编辑

4.1 PC端预览效果

222    222

4.2 移动端预览效果

注:不支持移动端。

5. 已完成模板编辑

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

附件列表


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

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

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