FineReport 控件的 CSS 樣式

在實際項目中，爲了讓 FineReport 報表中的控件和頁面中控件一緻， 需要修改控件的顯示樣式，如更換控件的圖标、修改控件邊框顔色，本文将會給出 FineReport 中有那些控件樣式可以修改，示例如何修改。

CSS：層疊樣式表(英文全稱：Cascading Style Sheets)，是一種用來表現HTML或XML等文件樣式的計算機語言，簡單來說，HTML用於構建網頁的結構、CSS用於構建HTML中元素的樣式。

2.1 查看控件的 class 選擇器

1）浏覽器預覽報表，這裏以 Chrome 浏覽器爲例。

2）将鼠标放在需要查看 class 的控件上，右鍵選擇「檢查」，即可查看到該控件的 class 語句。如下圖所示：

2.2 FR 控件對應的 class 選擇器

設置控件的 CSS 樣式可以在「模板 Web 屬性」中引用 CSS 實現，也可以在「模板 Web 屬性」中添加事件實現，據此給出如下兩個示例。

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 準備模板

1）新建模板，添加一個模板參數 p1。

2）将參數添加到參數面板中，并設置爲下拉框控件。

3）在 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 節開頭所示。