Posted on 2010-09-28 16:11
FineReport——报表技术领跑者 阅读(159)
评论(0) 编辑 收藏 所属分类:
Java报表技术知识
用户在实际项目中常会使用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 //正在加载的样式
文章转自：http://finereport.blog.chinabyte.com/2010/09/28/115/