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

目录:

1. 描述编辑

1.1 问题描述

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

如下图所示:

11.gif

1.2 解决思路

使用单元格条件属性新值:CONCATENATE("<div style='animation:twinkling .75s linear infinite'>" + $$$ + "</div>"),设置单元格用 HTML 显示内容,通过 CSS 设置单元格的闪烁效果。

2. 操作步骤编辑

2.1 打开报表

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

2.2 添加条件属性

1)右键 J3 单元格,选择条件属性,添加一个条件属性。

222

2)添加颜色属性,设置为红色:

222

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

222

4)在条件属性的公式条件中,选择公式,输入公式:$$$ > 12点击增加

如图:

222

2.3 设置 HTML 显示内容

点击 J3 单元格,在右侧面板中选择单元格属性,选择其他,设置显示内容为用 HTML 显示内容

222

2.4 添加自定义 CSS 样式  

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

点击下载 T1.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.5 引入 CSS 文件

点击模板>模板 Web 属性>引用 CSS,选中新建的 CSS 文件,点击增加。如下图所示:

222


3. 预览效果编辑

3.1 PC 端

保存模板,预览报表,效果如下图所示。

11.gif

3.2 移动端预览效果

注:不支持移动端。

5. 已完成模板编辑

已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\CSS样式\05-通过条件属性实现单元格内容的闪烁效果.cpt

点击下载模板:05-通过条件属性实现单元格内容的闪烁效果.cpt

点击下载 CSS 文件:T1.css