CSS修改元件樣式

1.1 使用場景

在實際項目中，為了讓 FineReport 報表中的元件和頁面風格一緻， 可以透過 CSS 修改元件的顯示樣式。

如下圖所示，希望參數面板上正文框元件的邊框變為紅色，字體顔色變為藍色。

除更換元件字體、修改邊框顔色外，還可以更換元件的圖示、修改元件的背景等。如下可以調整的內容：

• 修改元件預設藍色背景

• 將元件的背景調整為半透明或者透明

• 修改元件的字體大小、字體樣式、字體顔色

• 修改元件的長寬大小高度

• 修改元件邊框的顔色

• 修改元件選項中字體大小選項間距

本文將會給出 FineReport 中有那些元件樣式可以修改，並透過幾個範例說明如何修改。如下列出一下使用較多的場景：

• 修改下拉框的字體顔色、字體大小、預設藍色背景，背景透明度、選項列表的長寬大小等

• 修改按鈕的字體顔色、字體大小、預設藍色背景，背景透明度、按鈕長寬大小等

• 修改標簽元件的字體顔色、字體大小、邊框背景等

• 修改日期元件的字體顔色、字體大小、字體型號、預設藍色背景，背景透明度、選項日期格子的長寬大小等

• 修改正文元件的字體顔色、字體大小、邊框背景等

• 修改下拉樹、檢視表樹的字體顔色、字體大小、預設藍色背景，背景透明度、選項列表的長寬大小等

• 修改單選、複選按鈕元件的字體顔色、字體大小、背景透明度、按鈕選項的排列位置等

1.2 實現方法

透過修改元件的 CSS 樣式來實現。

CSS 是一種用來表現 HTML 或 XML 等檔案樣式的計算機語言，簡單來說，HTML 用於構建網頁的結構、CSS 用於構建 HTML 中元素的樣式，所以修改元件的 CSS 即可修改元件的樣式。

注：使用新計算引擎範本 不支援透過修改元件的 CSS 樣式來實現修改元件樣式。

2.1 獲取元件 class 選擇器

使用者需要先獲取到元件的 class 選擇器。

可以透過瀏覽器獲取元件的 class 選擇器，如下圖以 Chrome 瀏覽器為例，首先預覽報表，然後將滑鼠放在需要查看 class 的元件上，右鍵選擇「檢查」，即可查看到該元件的 class 。如下圖所示：

將 class 複制備用，如複制圖中正文元件的 class 選擇器 fr-texteditor。

這裏提供一份 FR 元件對應的 class 選擇器，可以參考使用。使用程式中，選擇器可能會因為不同瀏覽器、報表預覽方式、報表設計模式有變化，這時候可使用上述獲取的方法重新獲取選擇器即可。

注：新決策報表需要重新獲取 class，以下 class 會有變化 ，如下圖所示：

2.2 選擇 CSS 樣式屬性

當獲取到 class 之後，就要根據要修改的屬性來選擇 CSS 樣式。下表提供了一份常用的 CSS 樣式，使用者可參考使用，其他更多樣式可查看或學習 CSS 相關學習資料。

如我們要修改檔案元件的字體顔色，那就可以選用 color 屬性。

2.3 新增 JS 事件

選擇好 class 選擇器和修改屬性後，就可以透過代碼類修改元件的樣式。一般有兩種方式，直接新增代碼；或者是寫好腳本引用。

• 如何新增 JS 代碼可查看：JavaScript腳本

• 如何引用腳本檔案可查看：引用 CSS

修改代碼，只要符合修改 CSS 樣式的文法即可。如修改檔案元件的字體顔色，選用新增 JS 代碼的方式，代碼就可以使用 $(".fr-texteditor").css('color','red')。如下圖所示：

儲存範本後預覽即可查看效果。如下圖所示：

決策報表範例：

setTimeout(function() {

$('div[widgetname="TEXTEDITOR0"]').find(".bi-card, .bi-card .bi-input, .bi-card .bi-textarea").css('color','red')

}, 100);

注：$("div[widgetname=元件名]") 可用於定位到具體元件，元件名必須全部大寫 。

效果如下圖所示：

如下範例，使用者可參考學習。

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實現改變元件透明度