JS實現自動翻頁效果

1.1 預期效果

報表在「分頁預覽」時，當内容過多時，會自動分頁顯示，若此類報表在大屏上展示時，想要實現自動切換分頁的效果，該如何實現呢？如下圖所示：

1.2 實現思路

通過給報表添加「加載結束」事件實現。事件中，通過 JS 記錄報表當前頁頁碼，使用延時函數使頁面在指定時間後執行翻頁操作。

2.1 準備模板

準備一個分頁報表模板。

2.2 添加事件

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

JavaScript代碼如下：

var flag=0;
$(".content-container").click(
function(){
flag=1;
})
if(_g().currentPageIndex==_g().reportTotalPage){
setTimeout(function(){
if (flag==0) 
{
//首頁  
          contentPane.gotoFirstPage(); 
}},2000);
}
else{
setTimeout(function()
{
if (flag==0)
{
contentPane.gotoNextPage();
}},2000);
}
顯示代碼

2.3 效果預覽

保存模板，點擊「分頁預覽」，效果如下圖所示：

注：不支持移動端。

已完成模板可參考：%FR_HOME%\webroot\WEB-INF\reportlets\demo\Oldchart\advanced\數據可視化.cpt

點擊可下載模板 ：數據可視化.cpt