帆软 java 自定义按钮_Java报表工具FineReport自定义css使用方法

阅读提示：

文章中与FineReport软件使用的相关内容，基于软件的V7.0旧版本编写，不代表软件最新的使用方式。

FineReport最新版免费试用：https://www.finereport.com/product/active

FineReport最新版使用教程：https://help.fanruan.com/finereport/

在实际项目中，为了更符合报表使用者的审美观或者让FineReport报表和总体框架协调，可能需要修改一些页面显示的样式表(css)，下面我们就来学习几个例子，来看看如何在Java报表工具FineReport中自定义控件以及填报的css。

1.报表控件，以下拉树控件为例来看看怎样改变下拉树的图标的。

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

第二步：新建一个文件夹，这里叫custom并把该文件夹放到Web应用目录下(即和WEB-INF平行的地方)，将第一步的图标放入该文件夹内；

第三步：在custom文件夹内新建一个css文件，比如叫custom_tree.css;

第四步：custom_tree.css内容如下

.bbit-tree-node-leaf {background:url(“leaf.gif”);}

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

第六步：启动服务器，查看该报表，现在可以看到下拉树叶的图标就是你自定义的图标了。

下面附上树控件中比较关键的几个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 //正在加载的样式

2.报表填报，来看看把焦点框变成红色的步骤

第一步：新建一个叫文件夹，这里用一个叫write的文件夹做示例，同样的把该文件夹放到Web应用目录下；

第二步：在write文件夹中新建一个叫custom_cell.css的样式表文件；

第三步：在custom_cell.css中写入以下内容

.fDtop, .fDbottom, .fDleft, .fDright, .fDdot{

border:1px solid red;

}

第四步：打开报表。依次点击菜单：报表——>报表web属性——>引用css，在填报自定义样式表一览点插入按钮后写上上custom_cell.css的相对路径：write/custom_cell.css，确定后保存报表。

第五步：启动服务器查看此报表，可以看到填报的编辑框变成了红色边框。

同理：冻结先也可以按照类似的步骤进行自定义。

阅读次数：4,118