JS實現首尾相接的跑馬燈- FineReport帮助文档 - 全面的报表使用教程和学习资料

1. 概述

1.1 版本

報表伺服器版本	功能變更
11.0	-

1.2 預期效果

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

1.3 實現思路

儲存格中新增 html 程式碼，用 html 顯示內容，再配合 JS 實現捲動效果。

2. 普通報表範例

2.1 開啟範本

開啟%FR_HOME%\webroot\WEB-INF\reportlets\demo\form\以html實現縱向跑馬燈特效.cpt報表

2.2 新增公式

1）選中 B3 儲存格，新增公式："<div id=\"demo\" style=\"height:300px;overflow:hidden;\"> <div id=\"indemo\" style=\"height:200%;\"> <div id=\"demo1\"> <br />" + REPLACE(D3, ",", "<br /><br />") + "<br /><br /> </div> <div id=\"demo2\"></div> </div> </div>"

注1：公式中使用 replace 函式將 D3 儲存格的內容連接到 HTML 語句中，如果資料內容不在 D3 儲存格，需要修改。

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

2）隱藏 D 列。

2.3 設定 HTML 顯示內容

選中剛新增公式的 B3 儲存格，在「儲存格屬性>其他」位置，勾選「不自動調整」，將「顯示內容」設定為「用 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 預覽效果

儲存報表，點選「分頁預覽」，跑馬燈效果如下圖所示：

3. 決策報表範例

3.1 準備範本

建立決策報表，新增絕對畫布塊與報表塊，報表塊 report0 中內容設定方法同普通報表，參考普通報表範例，不再詳述，如下圖所示：

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);