Java报表工具FineReport自定义css使用方法

在实际项目中,为了更符合报表使用者的审美观或者让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,确定后保存报表。
第五步:启动服务器查看此报表,可以看到填报的编辑框变成了红色边框。

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

立即发现·数据价值

推荐阅读

→ 可视化分析平台对企业作用几何?

→ FineReport报表和水晶报表的比较

→ 3步搞定销售分析报表

→ 怎样用图表分析数据(二)

→ 一款简单、实时、酷炫的图表制作软件

→ 如何利用CRM系统报表,提高企业的核心竟争力?

→ 典型数据报表的样式和作用

→ jasperReport+Ireport和FineReport报表的对比

→ 融资?不要!上市?不急!这个帆软有点酷……

→ 怎样用图表分析数据(一)

版权所有©2017 南京帆软软件有限公司 | 苏ICP备14031611号-3

返回顶部