JS實現普通報表自動輪播

1.1 預期效果

在實際工作中，需要實現多張報表自動輪播效果，但區别於 自動切換分頁效果 及 圖表手動切換。實際效果如下圖所示：

1.2 實現思路

給報表添加「加載結束」事件，通過 JavaScript 延時函數，頁面加載完成後停留一定時間自動跳轉到另一頁面來實現自動輪播特效。

2.1 打開報表

依次打開設計器内置模板：

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\ doc\Advanced\Chart\3Darea_1.cpt
%FR_HOME%\webapps\webroot\WEB-INF\reportlets\ doc\Advanced\Chart\3Darea_2.cpt
 %FR_HOME%\webapps\webroot\WEB-INF\reportlets\ doc\Advanced\Chart\3Darea_3.cpt

2.2 添加事件

打開模板 3Darea_1.cpt，設計器菜單欄點擊模板>模板Web屬性>分頁預覽設置 ，選擇爲該模板單獨設置 ，添加 加載結束 事件，如下圖所示：

3Darea_1.cpt 報表的 JavaScript 代碼如下：

setTimeout(function(){
    window.location="${servletURL}?viewlet=doc/Advanced/Chart/3Darea_2.cpt";
},3000)

按照上述步驟，繼續爲 3Darea_2.cpt 報表的添加 加載結束 事件及 JavaScript 代碼，代碼如下：

setTimeout(function(){
    window.location="${servletURL}?viewlet=doc/Advanced/Chart/3Darea_3.cpt";
},3000)

按照上述步驟，繼續爲 3Darea_3.cpt 報表的添加 加載結束 事件及 JavaScript 代碼，代碼如下：

setTimeout(function(){
    window.location="${servletURL}?viewlet=doc/Advanced/Chart/3Darea_1.cpt";
},3000)

注：如果是決策報表文件（.frm），設置方法參見文檔：暫停和繼續輪播報表

2.3 效果預覽

保存模板，任一模板點擊分頁預覽 ，每隔 3 秒模板切換一次，效果如下圖所示：

注：不支持移動端。

已完成的模板可參見：

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\分頁預覽JS實例\普通報表自動輪播1.cpt

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\分頁預覽JS實例\普通報表自動輪播2.cpt

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\分頁預覽JS實例\普通報表自動輪播3.cpt

點擊下載模板：

注：模板下載後查看效果時，請先根據 JavaScript 代碼中模板路徑将模板保存在相應的路徑下。

普通報表自動輪播1.cpt

普通報表自動輪播2.cpt

普通報表自動輪播3.cpt