JS實現普通報表中自動滾屏/跑馬燈效果

1

版本。

2

預期效果。

1. 報表瀏覽頁面上放置很多圖表時，由於內容過多，超出了瀏覽器視窗的大小導緻內容展示不全，這時可以使用滾屏或跑馬燈來實現內容全部展示，如下圖所示。

3

實現思路。

1. 給報表新增【載入結束】JS 事件實現滾屏和跑馬燈的效果。

2. 跑馬燈的詳細API介紹可參見：跑馬燈API。

3. 決策報表實現跑馬燈效果請參考：JS實現決策報表中滾屏/跑馬燈效果。

1

準備範本。

1. 建立普通報表，建立資料集ds1，SQL 語句為 【SELECT * FROM 銷量 】。

2. 設計報表樣式，如下圖所示。

2

凍結標題列。

1. 點選【範本】→【重複與凍結設定】，設定重複和凍結標題列，如下圖所示。

3

新增 JS 事件。

1. 點選【範本】→【範本 Web 屬性】→【分頁預覽設定】，選擇【為該範本單獨設定】，新增一個【載入結束】事件，如下圖所示。

2. JavaScript 代碼如下：【_g().startMarquee();】。

4

效果預覽。

1. PC 端：儲存範本，點選【分頁預覽】，此時跑馬燈效果為：間隔時長預設為 0.1 s，每次捲動的距離為 5 px，滑鼠懸停時暫停。效果如第一章第1節所示。

2. 行動端：不支援行動端。

1. 不同的應用場景，需要不同的捲動效果，只需要在【載入結束】事件中修改相應的 JS 代碼即可。

注：JS 代碼非固定，可根據使用場景選擇和修改代碼。

1

無標題列捲動。

1. 報表不設定標題列凍結，直接滾屏顯示，效果如下圖所示。

2. JavaScript 代碼如下：【_g().startMarquee();】。

2

無標題列滑鼠懸停不停止捲動。

1. 報表捲動時，滑鼠點選，可以停止捲動，效果如下圖所示。

2. JavaScript 代碼如下：

   【_g().startMarquee({               

   stopOnHover:false   

   });】。

3

無標題列每 0.3s 捲動 2 px，滑鼠懸停暫停。

1. 報表捲動時，滑鼠懸浮報表，捲動會停止；滑鼠移開，再次捲動。效果如下圖所示。

2. JavaScript 代碼如下：

   【_g().startMarquee({        
   offset: 2,        
   interval: 0.3,        
   stopOnHover:true    
   });】。
   

1. 已完成範本可參考：【%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doctw\JS\分頁預覽JS實體\JS實現滾屏或跑馬燈.cpt】。

2. 點選下載範本： JS實現滾屏或跑馬燈.cpt。