用戶(hù)在實(shí)際項(xiàng)目中常會(huì)使用Java報(bào)表工具，為了更符合使用者的審美觀或者讓報(bào)表和總體框架協(xié)調(diào)，可能需要修改一些頁(yè)面顯示的樣式表(CSS)，如更換控件的圖標(biāo)或者改變填報(bào)表單控件的顯示樣式等。

下面以FineReport報(bào)表工具為例，簡(jiǎn)單介紹下自定義控件圖標(biāo)。

如下以下拉樹(shù)控件為例說(shuō)明如何改變控件的圖標(biāo)。

1．下拉樹(shù)模板制作

1.1    新建報(bào)表

1.2    定義參數(shù)

在菜單欄中選擇報(bào)表|報(bào)表參數(shù)，定義報(bào)表參數(shù)tree。

1.3    參數(shù)界面設(shè)置，如下圖所示

1.4    控件設(shè)置，如下圖所示

類(lèi)型選擇下拉樹(shù)，層次有兩層，定義如下圖

1.5    分頁(yè)預(yù)覽

分頁(yè)預(yù)覽可以看到默認(rèn)的控件圖標(biāo)如下

2.     引用CSS更換控件圖標(biāo)

2.1    收集圖標(biāo)

收集好需要使用的圖標(biāo)，推薦大小為16×16，假設(shè)想讓樹(shù)葉的圖標(biāo)為leaf.gif。

2.2    保存圖標(biāo)

在WebReport目錄下(即和WEB-INF平行的地方)新建一個(gè)文件夾，文件名為custom，將第一步的圖標(biāo)放入該文件夾內(nèi)。

2.3     生成CSS樣式

在custom文件夾內(nèi)新建一個(gè)css文件，如叫custom_tree.css，內(nèi)容如下：

.bbit-tree-node-leaf{background:url("leaf.gif");}

說(shuō)明：該語(yǔ)句是用來(lái)置換樹(shù)葉的樣式。

2.4    引用CSS

打開(kāi)使用下拉樹(shù)控件的報(bào)表，點(diǎn)擊菜單報(bào)表|報(bào)表Web屬性|引用css，在控件自定義樣式表界面點(diǎn)插入按鈕后寫(xiě)上custom_tree.css的相對(duì)路徑：

custom/custom_tree.css

確定后保存報(bào)表。

2.5    分頁(yè)預(yù)覽

點(diǎn)擊設(shè)計(jì)器中的分頁(yè)預(yù)覽，可看到更換圖標(biāo)后的下拉樹(shù)效果

3.     控件相關(guān)CSS

?         下拉樹(shù)控件

.bbit-tree-node-expanded.bbit-tree-node-icon //節(jié)點(diǎn)展開(kāi)的樣式

.bbit-tree-node-leaf.bbit-tree-node-icon //樹(shù)葉的樣式

.bbit-tree-node-collapsed.bbit-tree-node-icon //閉合的樣式

.bbit-tree-node-loading.bbit-tree-node-icon //正在加載的樣式

 文章轉(zhuǎn)自：http://finereport.blog.chinabyte.com/2010/09/28/115/