CSS修改控件样式

1.1 使用场景

在实际项目中，为了让 FineReport 报表中的控件和页面风格一致， 可以通过 CSS 修改控件的显示样式。

如下图所示，希望参数面板上文本框控件的边框变为红色，字体颜色变为蓝色。

除更换控件字体、修改边框颜色外，还可以更换控件的图标、修改控件的背景等。如下可以调整的内容：

• 修改控件默认的蓝色背景

• 将控件的背景调整为半透明或者透明

• 修改控件的字体大小、字体样式、字体颜色

• 修改控件的长宽大小高度

• 修改控件边框的颜色

• 修改控件选项中字体大小选项间距

本文将会给出 FineReport 中有那些控件样式可以修改，并通过几个示例说明如何修改。如下列出一下使用较多的场景：

• 修改下拉框的字体颜色、字体大小、默认蓝色背景，背景透明度、选项列表的长宽大小等

• 修改按钮的字体颜色、字体大小、默认蓝色背景，背景透明度、按钮长宽大小等

• 修改标签控件的字体颜色、字体大小、边框背景等

• 修改日期控件的字体颜色、字体大小、字体型号、默认蓝色背景，背景透明度、选项日期格子的长宽大小等

• 修改文本控件的字体颜色、字体大小、边框背景等

• 修改下拉树、视图树的字体颜色、字体大小、默认蓝色背景，背景透明度、选项列表的长宽大小等

• 修改单选、复选按钮控件的字体颜色、字体大小、背景透明度、按钮选项的排列位置等

1.2 实现方法

通过修改控件的 CSS 样式来实现。

CSS 是一种用来表现 HTML 或 XML 等文件样式的计算机语言，简单来说，HTML 用于构建网页的结构、CSS 用于构建 HTML 中元素的样式，所以修改控件的 CSS 即可修改控件的样式。

注1：新引擎 cptx 模板、cpt 模板「新填报预览」不支持通过修改控件的 CSS 样式来实现修改控件样式。

注2：以下示例方案在决策报表新自适应可能会失效，需要重新选取 class。

2.1 获取控件 class 选择器

用户需要先获取到控件的 class 选择器。

可以通过浏览器获取控件的 class 选择器，如下图以 Chrome 浏览器为例，首先预览报表，然后将鼠标放在需要查看 class 的控件上，右键选择「检查」，即可查看到该控件的 class 。如下图所示：

将 class 复制备用，如复制图中文本控件的 class 选择器 fr-texteditor。

这里提供一份 FR 控件对应的 class 选择器，可以参考使用。使用过程中，选择器可能会因为不同浏览器、报表预览方式、报表设计模式有变化，这时候可使用上述获取的方法重新获取选择器即可。

2.2 选择 CSS 样式属性

当获取到 class 之后，就要根据要修改的属性来选择 CSS 样式。下表提供了一份常用的 CSS 样式，用户可参考使用，其他更多样式可查看或学习 CSS 相关学习资料。

如我们要修改文件控件的字体颜色，那就可以选用 color 属性。

2.3 添加 JS 事件

选择好 class 选择器和修改属性后，就可以通过代码类修改控件的样式。一般有两种方式，直接添加代码；或者是写好脚本引用。

• 如何添加 JS 代码可查看：JavaScript脚本

• 如何引用脚本文件可查看：引用 CSS

修改代码，只要符合修改 CSS 样式的语法即可。如修改文件控件的字体颜色，选用添加 JS 代码的方式，代码就可以使用 $(".fr-texteditor").css('color','red')。如下图所示：

保存模板后预览即可查看效果。如下图所示：

如下示例，用户可参考学习。

3.1 修改文本框边框颜色和字体

希望参数面板上文本框控件的边框变为红色，字体颜色变为蓝色。如下图所示：

3.1.1 准备模板

1）新建模板，添加一个模板参数 p1。

2）将参数添加到参数面板中，并设置为文本框控件，参数默认值是地区。

最终模板如下图所示：

3.1.2 准备 CSS 文件

新建一个 CSS 文件test.css，保存在%FR_HOME%webroot 目录下。

CSS 文件内容为：

.fr-texteditor{ border:1px solid red; color:blue; font-weight:bold;}

其中 .fr-texteditor 是文本框类选择器，代码修改文本框的边框为红色，字体为蓝色加粗。 

3.1.3 引用 CSS 文件

打开模板，点击「模板>模板 Web 属性」，选择 「引用 CSS」，点击选择按钮，添加刚刚新建的 CSS 文件。如下图所示：

3.1.4 预览效果

保存模板，点击「分页预览」，效果如 3.1 节开头所示。

注：不支持移动端。

3.2 设置控件不可用不置灰

参数面板中控件，设置为「不可用」时，希望显示效果不置灰，和设置为「可用」时效果一致。如下图所示：

注：控件选择不可用后，预览不透明度降低，显示灰色  。

3.2.1 准备模板

新建模板，在 A1 单元格中添加一个「下拉框」控件，控件设置为不可用。如下图所示：

3.2.2 添加 WEB 页面事件

点击「模板>模板 Web 属性>填报页面设置」，选择 「为该模板单独设置」，勾选「直接显示控件」，添加一个「加载结束」事件，如下图所示：

JavaScript 代码如下：

setTimeout(function() {$(".ui-state-disabled").css({'opacity':'1'});}, 100)

代码重置控件的不透明度为 1，其中opacity: value|inherit

3.2.3 预览效果

保存模板，点击「填报预览」。效果如 3.2 节开头所示。

注：不支持移动端。

3.3 设置日期控件展开框字体样式

希望参数面板上日期控件的字体由默认字体变为华文楷体。如下图所示：

3.3.1 准备模板

1）新建模板，添加一个模版参数 p1。

2）将参数添加到参数面板中，并设置为日期控件。

最终模板如下图所示：

3.3.2 添加初始化后事件

点击「日期控件」，在「控件设置>事件」处，为其添加一个「初始化后」事件，如下图所示：

JavaScript 代码如下：

setInterval(function(){$(".fr-datepicker").css("font-family", "华文楷体");},500)

3.3.3 预览效果

保存模板，点击「分页预览」，效果如 3.3 节开头所示。

注：不支持移动端。

3.4  修改特定控件样式

CSS 修改样式的时候，如果不指定到特定的控件，则修改的是所有具有此 class 选择器的控件。如果要修改指定控件的样式，就必须获取到指定控件后再修改。

获取指定的控件的方法较多，如何使用，可以参考 CSS 选择器和 jQuery 选择器的用法。

如下示例：

参数面板中有两个文本框控件，如果只想修改「文本框控件」 TEXTEDITOR0 的样式，则先要获取到 TEXTEDITOR0 控件元素。

JavaScript 代码如下：

setTimeout(function() {
$("div[widgetname=TEXTEDITOR0]").find('.fr-texteditor').css('background-color', 'blue');
$("div[widgetname=TEXTEDITOR0]").find('.fr-texteditor').css('color', 'white');
}, 100);

3.5 决策报表中改变控件透明度

在开发决策报表时经常会使用深色背景，这时插入一个控件显得与背景格格不入，如下图所示：

就可以通过 CSS 修改控件背景透明度，使控件融入背景，如下图所示：

如何实现详细步骤可以查看：JS实现改变控件透明度