1. 概述编辑
1.1 问题描述
在设计大屏报表块时,希望实现文字跑马灯效果。
通常大家可以「HTML+JS」的方式实现单行文本的跑马灯效果,方案如下:
那么如何实现整体报表块的跑马灯效果呢?如下图所示:
1.2 解决思路
在报表块初始化后,通过 JS 实现隐藏滚动条和跑马灯的效果。
1)多个报表块同时实现跑马灯效果时,每个报表块可独立暂停。
2)存在冻结行时,报表块的跑马灯效果不受影响。
3)安装自定义滚动条时,报表块的跑马灯效果不受影响。
2. 示例编辑
2.1 新建模板
2.1.1 新建数据集
新建决策报表,新建数据集 ds1 ,SQL 语句为:SELECT * FROM 销量
如下图所示:
2.1.2 设计报表样式
新建报表块 report0,报表块样式如下图所示:
2.1.3 冻结标题行
选中报表块 report0,点击编辑,冻结第 1 行,如下图所示:
2.2 添加初始化事件
选中报表块 report0,添加初始化事件,如下图所示:
JavaScript 代码如下:
setTimeout(function() {
var $report = $("div[widgetname=REPORT0]");
//获取对应report的div元素
var $scroll = $report.find("#frozen-center");
//获取对应report的div元素的滚动块元素,冻结为#frozen-center,未冻结且未安装自定义滚动条插件为.reportContent,未冻结且安装了自定义滚动条插件为.scrollDiv
var flag = window.flag0;
//设置全局变量flag,每个报表块需保证各不相同
$report.find("#frozen-center").css('overflow-x', 'hidden');
$report.find("#frozen-center").css('overflow-y', 'hidden');
$report.find("#frozen-north").css('overflow-x', 'hidden');
$report.find("#frozen-north").css('overflow-y', 'hidden');
//冻结情况下隐藏滚动条
$report.find(".reportContent").css('overflow-y', 'hidden');
$report.find(".reportContent").css('overflow-x', 'hidden');
//非冻结情况下隐藏滚动条
flag = true;
//定义全局参数flag,用来控制滚动的暂停和继续
$scroll.mouseover(function() {
flag = false;
})
//鼠标悬浮,滚动停止
$scroll.mouseleave(function() {
flag = true;
})
//鼠标离开,继续滚动
var old = -1;
setInterval(function() {
if (flag) {
currentpos = $scroll[0].scrollTop;
//获取距顶部距离
if (currentpos == old) {
$scroll[0].scrollTop = 0;
//若已到达底部,则重置
} else {
old = currentpos;
$scroll[0].scrollTop = currentpos + 1.5;
//若未到达底部,则向下移动1.5像素
}
}
}, 25);
//以25ms的频率执行
}, 500);
用户需要自行修改以下几处:
修改点 | 注释 |
---|---|
var $report = $("div[widgetname=REPORT0]") | 1)用户需要根据报表块的名称修改 REPORT0 2)报表块的名称需要大写,例如示例中的 report0 报表块,需写为 REPORT0。 |
var $scroll = $report.find("#frozen-center") | 根据实际情况修改滚动块元素: #frozen-center:报表块中存在冻结 .reportContent:报表块中无冻结且未安装自定义滚动条插件 .scrollDiv:报表块中无冻结且安装了自定义滚动条插件 |
var flag = window.flag0 | 模板中存在多个跑马灯报表块时,依次设置为flag0,flag1,flag2等 需保证全局变量各不相同,否则无法实现单个暂停。 |
2.3 效果预览
保存模板,点击预览,报表块 report0 实现跑马灯效果,效果如1.1 问题描述所示。
注:不支持移动端。
3. 已完成模板编辑
已完成的模板请参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\03-报表块实现跑马灯效果.frm
点击下载模板:03-报表块实现跑马灯效果.frm