使用FineReport报表软件时自定义控件CSS概述


在实际项目中，为了更符合使用者的审美观或者让FineReport和总体框架协调，可能需要修改一些页面显示的样式表(CSS)，通常需要在自定义控件以及填报的过程中修改CSS
1. 控件，以下拉树为例
1.1 新建模板
1.2 定义参数
在菜单栏中选择报表|报表参数，打开参数定义面板，添加一个参数p1，默认值选择字符串形式，如下图
 
  
1.3 参数界面设置，如下图所示
 1.4 控件设置，如下图所示
类型选择下拉树，层次有两层，从数据库表中获得数据

 
层次2
 1.5 引用CSS换图标
 在WebReport目录下新建一个文件夹，文件名为custom，在custom文件夹下放入所要用到的名为face.gif的图片，并在custom文件夹下新建一个名为custom_tree.css的文件,文件内容为：.bbit-tree-node-icon {background:url("http://localhost:8075/WebReport/custom/face.gif");}，该语句是用来置换树叶的样式
  引用CSS
打开有使用下拉树控件的报表，依次点击菜单：报表——>报表web属性——>引用css，在控件自定义样式表一览点插入按钮后写上上custom_tree.css的相对路径：custom/custom_tree.css，确定后保存报表
 1.6 保存并预览
点击设计器中的分页预览
 2. 填报
2.1 打开reportlets\doc\Tutorial\Form\stuff.cpt 报表
2.2 引用CSS改变焦点框颜色
 在WebReport目录下新建一个文件夹，文件名为write，在write文件夹下新建一个名为custom_cell.css的文件,文件内容为：.fDtop, .fDbottom, .fDleft, .fDright, .fDdot{ border:1px solid red; }，该语句是用改变焦点框的颜色
 引用CSS
打开有使用下拉树控件的报表，依次点击菜单：报表——>报表web属性——>引用css，在控件自定义样式表一览点插入按钮后写上上custom_cell.css的相对路径：write/custom_cell.css，确定后保存报表
 2.3 保存并预览
点击设计器中的分页预览