Posted on 2010-07-14 12:43
FineReport——报表技术领跑者 阅读(251)
评论(0) 编辑 收藏 所属分类:
Java报表技术知识
在实际项目中,为了更符合使用者的审美观或者让FineReport和总体框架协调,可能需要修改一些页面显示的样式表(CSS),通常需要在自定义控件以及填报的过程中修改CSS
1. 控件,以下拉树为例
1.1 新建模板
1.2 定义参数
在菜单栏中选择报表|报表参数,打开参数定义面板,添加一个参数p1,默认值选择字符串形式,如下图
1.3 参数界面设置,如下图所示

1.4 控件设置,如下图所示
类型选择下拉树,层次有两层,从数据库表中获得数据

层次2

1.5 引用CSS换图标
l 在WebReport目录下新建一个文件夹,文件名为custom,在custom文件夹下放入所要用到的名为face.gif的图片,并在custom文件夹下新建一个名为custom_tree.css的文件,文件内容为:.bbit-tree-node-icon {background:url("http://localhost:8075/WebReport/custom/face.gif");},该语句是用来置换树叶的样式

l 引用CSS
打开有使用下拉树控件的报表,依次点击菜单:报表——>报表web属性——>引用css,在控件自定义样式表一览点插入按钮后写上上custom_tree.css的相对路径:custom/custom_tree.css,确定后保存报表

1.6 保存并预览
点击设计器中的分页预览

2. 填报
2.1 打开reportlets\doc\Tutorial\Form\stuff.cpt 报表
2.2 引用CSS改变焦点框颜色
l 在WebReport目录下新建一个文件夹,文件名为write,在write文件夹下新建一个名为custom_cell.css的文件,文件内容为:.fDtop, .fDbottom, .fDleft, .fDright, .fDdot{ border:1px solid red; },该语句是用改变焦点框的颜色
l 引用CSS
打开有使用下拉树控件的报表,依次点击菜单:报表——>报表web属性——>引用css,在控件自定义样式表一览点插入按钮后写上上custom_cell.css的相对路径:write/custom_cell.css,确定后保存报表

2.3 保存并预览
点击设计器中的分页预览
