Java报表软件内置JS使用之十一

文章转自：http://finereport.blog.chinabyte.com/2010/09/28/115/

用户在实际项目中常会使用Java报表软件，为了更符合使用者的审美观或者让报表和总体框架协调，可能需要修改一些页面显示的样式表(CSS)，如更换控件的图标或者改变填报表单控件的显示样式等。

下面以FineReport报表软件为例，简单介绍下自定义控件图标。

如下以下拉树控件为例说明如何改变控件的图标。

1．下拉树模板制作

1.1    新建报表

1.2    定义参数

在菜单栏中选择报表|报表参数，定义报表参数tree。

1.3    参数界面设置，如下图所示

1.4    控件设置，如下图所示

类型选择下拉树，层次有两层，定义如下图

1.5    分页预览

分页预览可以看到默认的控件图标如下

2.     引用CSS更换控件图标

2.1    收集图标

收集好需要使用的图标，推荐大小为16×16，假设想让树叶的图标为leaf.gif。

2.2    保存图标

在WebReport目录下(即和WEB-INF平行的地方)新建一个文件夹，文件名为custom，将第一步的图标放入该文件夹内。

2.3     生成CSS样式

在custom文件夹内新建一个css文件，如叫custom_tree.css，内容如下：

.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 //节点展开的样式

.bbit-tree-node-leaf.bbit-tree-node-icon //树叶的样式

.bbit-tree-node-collapsed.bbit-tree-node-icon //闭合的样式

.bbit-tree-node-loading.bbit-tree-node-icon //正在加载的样式