JS實現點擊按鈕切換Sheet頁

1.1 問題描述

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

1.2 實現思路

通過給參數面板上按鈕添加 JS 事件，事件中定位到對應 Sheet 實現。

2.1 準備模板

1）新建模板，在參數面板上添加 4 個「按鈕控件」，控件名稱分别爲首頁、上一頁、下一頁、尾頁。如下圖所示：

2）添加多個 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 效果預覽

保存模板，點擊「填報預覽」或「數據分析」預覽，效果如下圖所示：

注：不支持移動端。

已完成模板可參考：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\參數界面JS實例\JS實現點擊按鈕切換Sheet頁.cpt

點擊下載模板：JS實現點擊按鈕切換Sheet頁.cpt