JS實現FVS表格組件定時翻頁

適用場景：安裝了「FVS大屏編輯模式」插件的使用者，可參考本文了解 FVS 範本製作。

注：不支援行動端。

1.1 版本

1.2 預期效果

當 表格組件 設定了分頁功能，希望在預覽範本時表格組件可以自動、定時翻頁展示資料。預期效果如下圖所示：

1.3 實現思路

給表格組件新增「初始化後事件」，透過 setInterval() 方法結合分頁API實現表格組件定時重新整理翻頁。

2.1 建立範本

點選設計器左上角「檔案>新建大屏報表>從空白建立大屏」，可自訂名稱和尺寸。如下圖所示：

2.2 資料準備

建立資料庫查詢 ds1 ，SQL 查詢語句為：SELECT * FROM 銷量。如下圖所示：

2.3 設計表格

2.3.1 新增表格

新增一個表格組件，點選「編輯組件」進入表格編輯介面。如下圖所示：

2.3.2 設計表格內容

1）將資料集中的欄位拖入儲存格，設定對應標題。本例將 A2 儲存格的資料設定修改為「列表」，以便於後續設定分頁。表格樣式如下圖所示：

2）選中標題行，設定重複與凍結，即可在每一頁上顯示標題行。如下圖所示：

3）選中 A2 儲存格，設定「條件屬性>分頁>列後分頁」，條件選擇「公式」，輸入公式 &A2 % 5 = 0  ，即 5 行之後分頁。如下圖所示：

設定完成後，點選表格編輯介面左上角「傳回大屏範本」。

2.3.3 開啓表格分頁按鈕

設定表格組件內容自適應方式為「雙向鋪滿」，在表格工具欄中勾選「顯示分頁按鈕」。如下圖所示：

2.3.4 新增初始化後事件

給表格組件新增一個「初始化後事件」，輸入 JavaScript 代碼：

var re=duchamp.getWidgetByName("表格1_頁面1"); //獲取表格組件，需根據實際組件名稱更改
setInterval(function(){
	if(re.getCurrentPageIndex()==re.getReportTotalPage()){
		re.gotoPage(1) //當前頁碼等於總頁數時，跳轉到第一頁
		}
	else{
		re.gotoNextPage()  //跳轉到下一頁
		}
	},3000)   //每3秒呼叫一次API

步驟如下圖所示：

2.4 效果預覽

點選右上角「儲存」，點選「預覽」，預期效果如 1.2 節所示。每隔 3s 表格自動翻頁，到最後一頁時則跳轉到第一頁繼續循環。

點選下載範本：JS實現FVS表格組件定時翻頁.fvs