1. 概述
1.1 版本
报表服务器版本 | 功能变更 |
---|---|
11.0 | - |
1.2 预期效果
在一些大型的展示屏上,目前静态的图文展示已满足不了市场需求,有时候可能需要实现一些动态图文展示效果,例如跑马灯滚屏效果,那么要如何通过帆软报表来实现呢?预期效果如下:
1)竖屏滚动:
2)横屏滚动:
3)不规则横屏滚动:
注:在决策报表中,也可以直接使用官方提供的插件:滚动消息控件
1.3 实现思路
可以通过单元格的纯 HTML 展示效果来实现。
若想实现首尾相接的滚屏效果可参考:JS实现首尾相接的跑马灯
2. 示例:竖屏滚动
2.1 准备数据
新建普通报表,新建一个内置数据集 Embedded1,只添加一个字段,自定义一些文本数据,如下图所示:
2.2 设计报表
将数据集中的信息字段拖至 D4 单元格,并设置扩展方向为不扩展。设计表格样式如下图所示:
右击 D 列将其隐藏。
2.3 单元格插入公式
2.3.1 从上往下,水平靠左滚动
选中 B4 单元格,单击鼠标右键选择「单元格元素>插入公式」,公式如下:
"<marquee id='affiche' align='left' behavior='scroll' bgcolor='#ffffff' direction='down' height='250'
width='400' hspace='0' vspace='2' loop='-1' scrollamount='10' scrolldelay='100' onMouseOut='this.start()'
onMouseOver='this.stop()'>" + REPLACE(D4, ",", "<br /><br />") + "</marquee>"
注:公式是为了将 D4 单元格的内容拼接到 HTML 语句中。REPLACE(D4, ",", "<br/><br/>") 意思是将 D4 单元格内容中的 "," 替换成"<br/><br/>",<br /><br />在 HTML 中表示「换行」。
2.3.2 从下往上,水平居中滚动
只需要将上面的公式修改为:
"<marquee id='affiche' style='text-align:center;' behavior='scroll' bgcolor='#ffffff' direction='up' height='250'
width='400' hspace='0' vspace='2' loop='-1' scrollamount='10' scrolldelay='100'
onMouseOut='this.start()' onMouseOver='this.stop()'>" + REPLACE(D4, ",", "<br /><br />") + "</marquee>"
2.3.3 公式参数说明
参数 | 说明 |
---|---|
align |
|
style |
|
behavior |
|
bgcolor |
|
direction |
|
height |
|
width |
|
hspace |
|
vspace |
|
loop |
|
scrollamount |
|
scrolldelay |
|
onMouseOut=this.start() | 表示当鼠标移开的时候继续滚动 |
onMouseOver=this.stop() | 表示当鼠标悬停的时候停止滚动 |
2.4 设置单元格属性
2.4.1 用 HTML 显示单元格内容
选中 B4 单元格,将「单元格属性>其他」显示内容设置为「用 HTML 显示内容」,如下图所示:
2.4.2 取消单元格自动调整行高
选中 C4、D4 单元格,右击选择其他,选择「不自动调整」.
2.5 效果预览
2.5.1 PC 端
保存报表,点击「分页预览」,效果与 1.1 节竖屏滚动效果一致。
2.5.2 移动端
App 端和 HTML5 端均支持滚动效果,但不支持通过鼠标移动使其暂停并继续滚动的效果,如下图所示:
3. 示例:横屏滚动
3.1 准备数据
新建普通报表,新建一个内置数据集 Embedded1,只添加一个字段,自定义一些文本数据,如下图所示:
3.2 设计报表
将数据列拖至 A1 单元格,并设置扩展方向为「不扩展」,右击 A 列将其隐藏,表格样式如下图所示:
3.3 单元格插入公式
在 B2 单元格插入公式:
"<marquee id='affiche' style='text-align:center;display:table-cell;vertical-align:middle;' behavior='scroll'
bgcolor='#ffffff' direction='left' height='100%' width='500%' hspace='0' vspace='2' loop='-1' scrollamount='10'
scrolldelay='100' onMouseOut='this.start()' onMouseOver='this.stop()'>" + REPLACE(A1, ",", " ") + "</marquee>"
注:公式参数解释请参考 2.3.3 节。
3.4 设置单元格属性
选中 B2 单元格,设置「单元格属性>其他」,选择「基本」下「不自动调整」,显示内容设置为「用 HTML 显示内容」,如下图所示:
3.5 效果预览
3.5.1 PC 端
保存报表,点击「分页预览」,可以看到文本从右往左,垂直居中滚动,效果与 1.1 节横屏滚动效果一致。
3.5.2 移动端
App 端和 HTML5 端均支持滚动效果,但不支持通过鼠标移动使其暂停并继续滚动的效果,如下图所示:
4. 示例:不规则横屏滚动
4.1 准备数据
新建普通报表,新建一个内置数据集 Embedded1,只添加一个字段,自定义一些文本数据,如下图所示:
4.2 设计报表
将数据列拖入 A3 单元格,并设置其扩展方向为「纵向扩展」,表格样式如下图所示:
最后将 A 列隐藏。
4.3 单元格插入公式
在 B3 单元格插入公式:
"<marquee id='affiche' align='left' behavior='scroll' bgcolor='#ffffff' direction='left' height='250' width='400'
hspace='0' vspace='2' loop='-1' scrollamount='"+(rand()*(11-1)+1)+"' scrolldelay='100' onMouseOut='this.start()'
onMouseOver='this.stop()'>" + REPLACE(A3, ",", "<br />") + "</marquee>"
注:公式参数解释请参考 2.3.3 节。
其中scrollamount='"+(rand()*(11-1)+1)+"' 表示生成一个位于 11 和 1 之间的随机数,作为运动速度的值。
4.4 设置单元格属性
选中 B3 单元格,设置「单元格属性>其他」,选择「基本」下「不自动调整」,显示内容设置为「用 HTML 显示内容」,如下图所示:
4.5 效果预览
4.5.1 PC 端
保存报表,点击「分页预览」,效果与 1.1 节不规则横屏滚动效果一致。
4.5.2 移动端
App 端和 HTML5 端均支持滚动效果,但不支持通过鼠标移动使其暂停并继续滚动的效果,如下图所示:
5. 模板下载
已完成模板可参见:
%FR_HOME%\webroot\WEB-INF\reportlets\demo\form\以html实现纵向跑马灯特效.cpt
%FR_HOME%\webroot\WEB-INF\reportlets\demo\form\以html实现横向跑马灯特效.cpt
%FR_HOME%\webroot\WEB-INF\reportlets\demo\form\以html实现不规则横向跑马灯特效.cpt
点击下载模板: