JS實現點選按鈕切換Sheet頁

1.1 版本

1.2 問題描述

當報表有多個 Sheet 時，可以透過參數面板上按鈕跳轉到指定的 Sheet 頁。如下圖所示：

1.3 實現思路

透過給參數面板上按鈕新增 JS 事件，事件中定位到對應 Sheet 實現。

2.1 準備範本

1）建立範本，在參數面板上新增 4 個「按鈕元件」，元件名稱分別為首頁、上一頁、下一頁、尾頁。如下圖所示：

2）點選範本參數面板，取消勾選「點擊查詢前不顯示報表內容」。如下圖所示：

3）新增多個 Sheet 頁，在每個 Sheet 頁中新增紅色辨識語句。如下圖所示：

2.2 新增事件

1）選中首頁「按鈕元件」，為其新增一個「點擊」事件，實現點選按鈕時跳轉到 Sheet1 頁。如下圖所示：

JavaScript 程式碼如下：

//跳轉到首頁(因為下標是從0開始) fr-sheetbutton-container為sheet頁的集合
$(".fr-sheetbutton-container").eq(0).trigger("click");

2）同樣的方法為上一頁、下一頁、尾頁「元件按鈕」新增「點擊」事件。事件內容如下：

上一頁 JavaScript 程式碼：

//fr-sheetbutton-container為sheet頁的集合,獲取集合長度
var len = $(".fr-sheetbutton-container").length;
//獲取當前選中sheet所在下標位置
var index = $(".fr-sheetbutton-container").index($(".fr-sheetbutton-container-active"));
//如果當前下標為0 表示為首頁。
if(index > 0) {
//不是首頁跳轉到上一頁
    $(".fr-sheetbutton-container").eq(index - 1).trigger("click");
}else{
//當前為首頁跳轉到最後一頁(因為下標從0開始，所以要長度減1)
$(".fr-sheetbutton-container").eq(len - 1).trigger("click");
}

下一頁 JavaScript 程式碼：

//fr-sheetbutton-container為sheet頁的集合,獲取集合長度
var len = $(".fr-sheetbutton-container").length;
//獲取當前選中sheet所在下標（下標從0開始）
var index = $(".fr-sheetbutton-container").index($(".fr-sheetbutton-container-active"));
if(index < len) {
//如果當前下標index比len長度小1 表示已經為最後一頁。
    if(index == (len - 1)) {
       //當前為最後一頁。跳轉到首頁
        $(".fr-sheetbutton-container").eq(0).trigger("click");
    } else {
       // 不為最後一頁。跳轉到下一頁
        $(".fr-sheetbutton-container").eq(index + 1).trigger("click");
    }
}

尾頁 JavaScript 程式碼：

//fr-sheetbutton-container為sheet頁的集合,獲取集合長度
var len = $(".fr-sheetbutton-container").length;
//跳轉到尾頁(因為下標是從0開始) 所以得長度減1
$(".fr-sheetbutton-container").eq(len-1).trigger("click");

2.3 效果預覽

2.3.1 PC 端

儲存範本，點選「填報預覽」或「資料分析」預覽，效果如下圖所示：

2.3.2 行動端

不支援行動端。

點選下載範本：JS實現點選按鈕切換sheet頁.cpt