用戶(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/