JS实现首尾相接的跑马灯- FineReport帮助文档 - 全面的报表使用教程和学习资料

1. 概述

1.1 預期效果

在進行一些集團新聞内容展示時，可能需要一種首尾相接的跑馬燈滾動效果，如下圖所示：

222

1.2 實現思路

單元格中添加 html 代碼，用 html 顯示内容，再配合 JS 實現滾動效果。

2. 普通報表示例

2.1 準備模板

1）新建模板，新建一個内置數據集 Embedded1，如下圖所示：

2）将内置數據集 Embedded1 的 ColName1 列數據拖入 A1 單元格，并設置爲不擴展，如下圖所示：

2.2 添加公式

在 A2 單元格添加公式：

"<div id=\"demo\" style=\"height:250px;overflow:hidden;\"> <div id=\"indemo\" style=\"height:200%;\"> <div id=\"demo1\"> <br />"+REPLACE(A1,",","<br /><br />")+"<br /><br /> </div> <div id=\"demo2\"></div> </div> </div>"

注1：公式中使用 replace 函數将 A1 單元格的内容拼接到 HTML 語句中，如果數據内容不在 A1 單元格，需要修改。

注2：公式中的 demo，demo1 ，demo2 會在後面 JavaScript 中引用，請不要改名字。

2.3 設置 HTML 顯示内容

選中剛添加公式的 A2 單元格，在「單元格屬性>其他」位置，将「顯示内容」設置爲「用 HTML 顯示内容」，如下圖所示：

2.4 添加 JS 事件

點擊菜單「模板>模板 Web 屬性>分頁預覽設置」，選擇「爲該模板單獨設置」，添加「加載結束」事件，如下圖所示：

JavaScript 代碼如下：

setTimeout(function(){ 
speed = 50; //滾動速度      
var tab = document.getElementById("demo");//外層可視模塊 
var tab1 = document.getElementById("demo1");//内層滾動内容模塊1
var tab2 = document.getElementById("demo2");//内層滾動内容模塊2 無縫對接到1後面的内容
tab2.innerHTML = tab1.innerHTML;//克隆demo1爲demo2
tab.scrollTop = tab1.offsetHeight;
//創建一個滾動函數，當滾動至demo1與demo2交界時,demo跳到最頂端
function Marquee(){
    if (tab.scrollTop >= tab1.offsetHeight) {
        tab.scrollTop-=tab2.offsetHeight;
    }else{
        tab.scrollTop+=1;
    }
}
var MyMar=setInterval(Marquee,speed);
},1500);
//隐藏頭尾空白行
setTimeout(function(){        
document.getElementById("r-1-0").style.height=0;
},100);
顯示代碼

2.5 預覽效果

保存報表，點擊分頁預覽，跑馬燈效果如下圖所示：
222

3. 決策報表示例

3.1 準備模板

1）新建決策報表，添加絕對畫布塊與報表塊，如下圖所示：

2）報表塊 report0 中内容設置方法同普通報表，參考2.1節、2.2 節、2.3節，不再詳述，如下圖所示：

3.2 添加 JS 事件

選中報表塊 report0，添加「初始化後」事件，如下圖所示：

JavaScript 代碼如下：

跑馬燈不需要定時刷新

setTimeout(function(){ 
speed = 50; //滾動速度      
var tab = document.getElementById("demo");//外層可視模塊 
var tab1 = document.getElementById("demo1");//内層滾動内容模塊1
var tab2 = document.getElementById("demo2");//内層滾動内容模塊2 無縫對接到1後面的内容
tab2.innerHTML = tab1.innerHTML;//克隆demo1爲demo2
tab.scrollTop = tab1.offsetHeight;
//創建一個滾動函數，當滾動至demo1與demo2交界時,demo跳到最頂端
function Marquee(){
    if (tab.scrollTop >= tab1.offsetHeight) {
        tab.scrollTop-=tab2.offsetHeight;
    }else{
        tab.scrollTop+=1;
    }
}
var MyMar=setInterval(Marquee,speed);
},1500);
//隐藏頭尾空白行
setTimeout(function(){        
document.getElementById("r-1-0").style.height=0;
},100);
顯示代碼

跑馬燈需要定時刷新

var form = this.options.form;
setInterval(function() {
form.getWidgetByName('report0').gotoPage(1, "{}", true);//刷新報表塊，report0爲報表塊的控件名稱
$(".loading-ec-indicator").eq(0).remove();//移除刷新加載圖片
$(".text-indicator").remove();//移除正在加載文字
setTimeout(function() {
speed = 50; //滾動速度    
var tab = document.getElementById("demo");//外層可視模塊 
var tab1 = document.getElementById("demo1");//内層滾動内容模塊1
var tab2 = document.getElementById("demo2");//内層滾動内容模塊2 無縫對接到1後面的内容
tab2.innerHTML = tab1.innerHTML;//克隆demo1爲demo2
tab.scrollTop = tab1.offsetHeight;
//創建一個滾動函數，當滾動至demo1與demo2交界時,demo跳到最頂端
function Marquee() {
if (tab.scrollTop >= tab1.offsetHeight) {
tab.scrollTop -= tab2.offsetHeight;
} else {
tab.scrollTop += 1;
}
}
var MyMar = setInterval(Marquee, speed);
}, 1000);
}, 5000);顯示代碼