FR的控件CSS样式

编辑
文档创建者:文档助手1 (67727 )     浏览次数:12716次     编辑次数:17次     最近更新:ukae 于 2018-08-14     

目录:

1. 问题描述编辑

在实际项目中,为了让FineReport报表中的控件和页面中控件一致,可能需要修改一些控件的样式,如更换控件的图标或者改变填报控件的显示样式等,下面我们就来看下如何选择FR的控件,并有哪些样式可以修改。

2. 控件的CSS编辑

2.1 查看控件的class
1)安装chrome浏览器;
2)预览报表,将鼠标放在需要查看class的控件上,点击右键,选择检查,即可查看到相应控件的class。
222

2.2 FR控件对应的class选择器

class选择器对应的样式适用控件
.fr-texteditor文本区域边框,字样(大小,颜色,字体等)文本、文本域、下拉框、下拉复选框、树、日期
.fr-texteditor-focus获取焦点后的文本框的边框、字样文本、文本域、下拉框、下拉复选框、树、日期
.fr-trigger-texteditor 下拉控件边框,字样(大小,颜色,字体等)下拉框、下拉复选框、下拉树、日期
.fr-trigger-texteditor-focus 获取焦点后的下拉控件边框、字样下拉框、下拉复选框、下拉树、日期
.fr-combo-list-item
下拉项的边框、字样、背景色、高度
下拉框、下拉复选框
.fr-combo-selected获得焦点的下拉项的边框、字样、背景色下拉框
.fr-combo-list-item-noselect下拉项中“不选“边框、字样、背景色
下拉框
.fr-widget-click下拉项中文本的字样、背景色
下拉复选框
.fr-checkbox-checkon已选择的下拉项中文本边框、字样、背景色下拉复选框
.fr-checkbox-checkoff未选择的下拉项中文本边框、字样、背景色下拉复选框 
.fr-list-bwrap列表控件的背景色列表
.fr-list-node-anchor字样列表
.fr-list-node-over鼠标移动上去的列表项背景色,字体颜色列表
.fr-list-node-selected被选中的列表项的背景色,字体颜色列表
.fr-tree-node树列表的样式(背景色、字体等)视图树
 .fr-tree-elbow-plus加号图标样式
视图树
.fr-tree-node-collapsed 
未展开的文件夹图标样式视图树
.fr-tree-elbow-minus减号图标样式视图树
.fr-tree-node-expanded 
已展开的文件夹图标样式视图树
.fr-tree-node-icon子节点图标样式视图树
 .fr-btn-text 按钮中文本的字样(大小,颜色,字体等) 按钮
 .fr-btn-up 按钮宽度、高度、背景色、边框 按钮

3. 示例编辑

添加一个模板参数p1,将模板参数添加到参数面板中,并设置为文本框控件,参数默认值是地区;再在报表里添加一个文本框控件,文本控件内容也是地区。希望获取参数面板上文本框和报表里的文本框边框变为红色,字体颜色变为蓝色,直接使用FineReport设计器是无法实现这个效果的,那么使用css样式该如何实现呢?
3.1 css样式编写
新建一个css文件,在上表中可以查找到获取文本框的类选择器为.fr-texteditor,故可在css文件中输入该类的样式,如下:
.fr-texteditor{ border:1px solid red; color:blue; font-weight:bold;}
保存该css文件为css.css,保存在%FR_HOME%/下面。
3.2 引用CSS
打开模板,点击模板>模板web属性,选择引用Css,点击选择按钮,选中刚刚新建的css文件,点击增加按钮,将该css增加到下方列表中,如下图所示:

222

3.3 效果查看
点击填报预览,如下图所示效果:
222
注:修改css样式除了可引用外部css文件之外,还可以通过web页面事件来覆盖其样式,比如说,加载完成之后,希望文本框边框显示为绿色,字体显示为加粗蓝色,即可打开模板,点击模板>模板web属性>填报预览设置,选择为该模板单独设置,添加一个加载结束事件,并且勾选上直接显示控件,如下图:
$(".fr-texteditor").css("color","blue"); $(".fr-texteditor").css("font-weight","bold"); $(".fr-texteditor").css("border","1px solid red");
注:双引号和单引号均可
222

其中,$(".fr-texteditor")是获取文本框类,然后修改其css。

4. 示例二编辑

控件设置不可用,显示效果就置灰了,用户想要跟可用一样的样式,如下图:

222

可以通过web页面事件来覆盖其样式,打开模板,点击模板>模板web属性>填报预览设置,选择为该模板单独设置,添加一个加载结束事件,并且勾选上直接显示控件,js代码如下:

$('.ui-state-disabled').css({'opacity':'1'}); $('.fst-edt').css('color','black');

代码语法:

opacity: value|inherit;

描述
value规定不透明度。从 0.0 (完全透明)到 1.0(完全不透明)。
inherit应该从父元素继承 opacity 属性的值。
 

索引:

CSS修改对话框样式

CSS修改工具栏按钮颜色

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

CSS修改填报页面中鼠标经过/点击单元格边框颜色

通过条件属性实现单元格内容的闪烁效果

修改超链接-对话框标题栏的背景色

利用CSS设置按钮文字大小

利用CSS设置下拉框主题

替换官方默认动画和图标


附件列表


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

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

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