1. 概述
1.1 問題描述
普通報表可以參考 JS實現自動滾屏/跑馬燈效果 實現跑馬燈效果，決策報表中報表塊如何實現下圖所示的跑馬燈效果呢？
1.2 實現思路
通過給報表塊添加「初始化後」 JS 事件實現隐藏滾動條的跑馬燈的效果。
2. 示例
2.1 數據準備
新建決策報表，新建數據集 ds1 ，SQL 語句爲：SELECT * FROM 銷量
2.2 報表設計
1）将報表塊report0拖入到 body 組件中，如下圖設計報表塊的表格。
2）選中報表塊report0，點擊編輯，凍結第 1 行，如下圖所示：
2.3 添加事件
選中報表塊report0，添加初始化事件，如下圖所示：
JavaScript 代碼如下：
setTimeout(function() {
//隐藏報表塊report0的滾動條（此報表塊名爲report0，根據具體情況修改）
$("div[widgetname=REPORT0]").find(".frozen-north").css({
'overflow-x':'hidden',
'overflow-y':'hidden'
});
$("div[widgetname=REPORT0]").find(".frozen-center").css({
'overflow-x':'hidden',
'overflow-y':'hidden'
});
},1000);
window.flag1 = true;
var self1 = this;
//鼠标懸停，滾動停止
setTimeout(function() {
$("div[widgetname=REPORT0]").find(".frozen-center").mouseover(function() {
window.flag1 = false;
});
//鼠标離開，繼續滾動
$("div[widgetname=REPORT0]").find(".frozen-center").mouseleave(function() {
window.flag1 = true;
});
var old = -1;
var interval = setInterval(function() {
if (!self1.isVisible()) {
return;
}
if (window.flag1) {
currentpos1 = $("div[widgetname=REPORT0]").find(".frozen-center")[0].scrollTop;
if (currentpos1 == old && 0!=currentpos1) {
$("div[widgetname=REPORT0]").find(".frozen-center")[0].scrollTop = 0;
} else {
old = currentpos1;
//以25ms的速度每次滾動1.5PX
$("div[widgetname=REPORT0]").find(".frozen-center")[0].scrollTop = currentpos1 + 1.5;
}
}
},
25);
},
1000);
實際應用時，用戶需要自行修改以下幾處：
| 修改點 | 注釋 |
|---|---|
| $("div[widgetname=REPORT0]") | 用戶需要根據報表塊的名稱修改 REPORT0，報表塊的名稱需要大寫 |
find(".frozen-center") | 根據實際情況修改滾動塊元素名稱 ： .frozen-center：報表塊中存在凍結 .reportContent：報表塊中無凍結且未安裝自定義滾動條插件 .scrollDiv：報表塊中無凍結且安裝了自定義滾動條插件 |
| var flag = window.flag0 | 模板中存在多個跑馬燈報表塊時，依次設置爲 flag0，flag1，flag2 等 需保證全局變量各不相同，否則無法實現單個暫停 |
| 25); | 滾動速度，用戶可以根據實際情況修改 |
注：如果報表塊加載比較慢沒有實現效果，可以适當調整延時函數 setTimeout( )的延時時間。
2.4 效果預覽
保存報表，點擊PC端預覽，跑馬燈效果如下圖所示：
注1：不支持移動端。
注2：不支持報表塊定時刷新場景。
注3：如果不安裝 自定義滾動條 插件，鼠标移入後不跟随鼠标滾輪移動。
3. 擴展應用
新增一種報表塊跑馬燈應用場景和設置方法：報表前端展示時，報表塊處於隐藏不顯示的狀态，點擊按鈕後，報表塊可以顯示并自動加載跑馬燈效果。如下圖所示：
3.1 數據準備
新建決策報表，新建數據集 ds1 ，SQL 語句爲：SELECT * FROM 銷量
3.2 報表設計
1）将報表塊report0和按鈕控件button0_c拖入到 body 組件中，如下圖設計報表塊的表格，不勾選控件可見，隐藏報表塊。
2）選中報表塊組件，點擊編輯，凍結第 1 行，如下圖所示：
3.3 添加事件
1）選中報表塊組件，給報表塊添加一個初始化事件，實現跑馬燈效果，如下圖所示：
JavaScript 如下：
setTimeout(function() {
//隐藏報表塊report0的滾動條（此報表塊名爲report0，根據具體情況修改）
$("div[widgetname=REPORT0]").find(".frozen-north").css({
'overflow-x':'hidden',
'overflow-y':'hidden'
});
$("div[widgetname=REPORT0]").find(".frozen-center").css({
'overflow-x':'hidden',
'overflow-y':'hidden'
});
},1000);
window.flag1 = true;
var self1 = this;
//鼠标懸停，滾動停止
setTimeout(function() {
$("div[widgetname=REPORT0]").find(".frozen-center").mouseover(function() {
window.flag1 = false;
});
//鼠标離開，繼續滾動
$("div[widgetname=REPORT0]").find(".frozen-center").mouseleave(function() {
window.flag1 = true;
});
var old = -1;
var interval = setInterval(function() {
if (!self1.isVisible()) {
return;
}
if (window.flag1) {
currentpos1 = $("div[widgetname=REPORT0]").find(".frozen-center")[0].scrollTop;
if (currentpos1 == old && 0!=currentpos1) {
$("div[widgetname=REPORT0]").find(".frozen-center")[0].scrollTop = 0;
} else {
old = currentpos1;
//以25ms的速度每次滾動1.5PX
$("div[widgetname=REPORT0]").find(".frozen-center")[0].scrollTop = currentpos1 + 1.5;
}
}
},
25);
},
1000);
2）選中按鈕組件，給按鈕添加一個點擊事件，點擊之後可以顯示被隐藏的報表塊，如下圖所示：
JavaScript 代碼如下：
this.options.form.getWidgetByName('REPORT0').setVisible(true)
3.4 效果預覽
保存報表，點擊PC端預覽，效果如下圖所示：
4. 已完成模板
已完成的模板請參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表單JS實例\03-報表塊實現跑馬燈效果.frm
%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表單JS實例\報表塊跑馬燈擴展應用.frm
點擊下載模板：
