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

下面以FineReport報表工具為例，簡單介紹下自定義控件圖標。

如下以下拉樹控件為例說明如何改變控件的圖標。

1．下拉樹模板制作

1.1    新建報表

1.2    定義參數(shù)

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

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

1.4    控件設置，如下圖所示

類型選擇下拉樹，層次有兩層，定義如下圖

1.5    分頁預覽

分頁預覽可以看到默認的控件圖標如下

2.     引用CSS更換控件圖標

2.1    收集圖標

收集好需要使用的圖標，推薦大小為16×16，假設想讓樹葉的圖標為leaf.gif。

2.2    保存圖標

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

2.3     生成CSS樣式

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

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

說明：該語句是用來置換樹葉的樣式。

2.4    引用CSS

打開使用下拉樹控件的報表，點擊菜單報表|報表Web屬性|引用css，在控件自定義樣式表界面點插入按鈕后寫上custom_tree.css的相對路徑：

custom/custom_tree.css

確定后保存報表。

2.5    分頁預覽

點擊設計器中的分頁預覽，可看到更換圖標后的下拉樹效果

3.     控件相關CSS

?         下拉樹控件

.bbit-tree-node-expanded.bbit-tree-node-icon //節(jié)點展開的樣式

.bbit-tree-node-leaf.bbit-tree-node-icon //樹葉的樣式

.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/