历史版本3 :通过条件属性实现单元格内容的闪烁效果 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 需求描述编辑

在报表制作过程中,有时为了突出满足一定条件的单元格效果,往往需要对其进行一些特效处理,比如添加单元格闪烁效果等,当我们遇到这样的需求时,该如何实现呢?

如图:
222

2. 实现思路编辑

2.1 添加自动以样式  

在工作目录下添加一个自定义css文件,比如T1.CSS。

如图:
222

css脚本:

@keyframes twinkling{ 0%{ opacity:0; /*透明度为0*/ } 100%{ opacity:1; /*透明度为1*/ } } @-moz-keyframes twinkling { /* Firefox */ 0%{ opacity:0; /*透明度为0*/ } 100%{ opacity:1; /*透明度为1*/ } } @-webkit-keyframes twinkling{ /* Safari 和 Chrome */ 0%{ opacity:0; /*透明度为0*/ } 100%{ opacity:1; /*透明度为1*/ } } @-o-keyframes twinkling { /* Opera */ 0%{ opacity:0; /*透明度为0*/ } 100%{ opacity:1; /*透明度为1*/ } }

2.2 引入css文件

添加服务器配置文件,引用新建的css文件。

点击服务器>服务器配置>引用css,选中新建的css磁盘文件,添加。如图:

222

2.3 添加单元格 条件属性

用【HTML显示内容】来实现

222

3. 示例编辑

3.1 打开报表

打开 %FR_HOME%\WebReport\WEB-INF\reportlets\doc\Form\LineForm\LineForm.cpt 报表。

3.2 添加条件属性

在I2单元格,条件公式:=$$$<12

3.3 添加属性

【颜色】属性,值分别为【红色】、当前格子

【新值】属性,公式:CONCATENATE("<div style='animation:twinkling .75s linear infinite'>" + $$$ + "</div>")

如图:
222

3.4 保存和预览

效果图:

222