反饋已提交
網絡繁忙
在实际项目中,为了让 FineReport 报表中的控件和页面中控件一致, 需要修改控件的显示样式,如更换控件的图标、修改控件边框颜色,本文将会给出 FineReport 中有那些控件样式可以修改,示例如何修改。
CSS:层叠样式表(英文全称:Cascading Style Sheets),是一种用来表现HTML或XML等文件样式的计算机语言,简单来说,HTML用于构建网页的结构、CSS用于构建HTML中元素的样式。
1)浏览器预览报表,这里以 Chrome 浏览器为例。
2)将鼠标放在需要查看 class 的控件上,右键选择「检查」,即可查看到该控件的 class 语句。如下图所示:
设置控件的 CSS 样式可以在「模板 Web 属性」中引用 CSS 实现,也可以在「模板 Web 属性」中添加事件实现,据此给出如下两个示例。
希望参数面板上文本框控件的边框变为红色,字体颜色变为蓝色。如下图所示:
1)新建模板,添加一个模板参数 p1。
2)将参数添加到参数面板中,并设置为文本框控件,参数默认值是地区。
最终模板如下图所示:
新建一个 CSS 文件test.css,保存在%FR_HOME%webroot 目录下。
CSS 文件内容为:
.fr-texteditor{ border:1px solid red; color:blue; font-weight:bold;}
其中 .fr-texteditor 是文本框类选择器,代码修改文本框的边框为红色,字体为蓝色加粗。
打开模板,点击「模板>模板 Web 属性」,选择 「引用 CSS」,点击选择按钮,添加刚刚新建的 CSS 文件。如下图所示:
保存模板,点击「分页预览」,效果如 3.1 节开头所示。
参数面板中控件,设置为「不可用」时,希望显示效果不置灰,和设置为「可用」时效果一致。如下图所示:
注:控件选择不可用后,预览不透明度降低,显示灰色 。
2)将参数添加到参数面板中,并设置为下拉框控件。
3)在 A1 单元格中也添加填报下拉框控件。
点击「模板>模板 Web 属性>填报页面设置」,选择 「为该模板单独设置」,勾选「直接显示控件」,添加一个「加载结束」事件,如下图所示:
JavaScript 代码如下:
setTimeout(function() {$(".ui-state-disabled").css({'opacity':'1'});}, 100)
代码重置控件的不透明度为 1,其中opacity: value|inherit
保存模板,点击「分页预览」。效果如 3.2 节开头所示。
希望参数面板上日期控件的字体由默认字体变为华文楷体。如下图所示:
1)新建模板,添加一个模版参数 p1。
2)将参数添加到参数面板中,并设置为日期控件。
点击「日期控件」,在「控件设置>事件」处,为其添加一个「初始化后」事件,如下图所示:
setInterval(function(){$(".fr-datepicker").css("font-family", "华文楷体");},500)
保存模板,点击「分页预览」,效果如 3.3 节开头所示。
文 檔回 饋
滑鼠選中內容,快速回饋問題
滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。
不再提示
10s後關閉