JS 實現點擊查詢後停留在當前查詢的 Tab 頁

1.1 問題描述

在使用表單的 Tab 塊功能時，我們經常會遇到類似這樣的問題：

當在一個 Tab 塊中有多個 Tab 頁存在，如果用戶所處其他 Tab 頁（非第一個 Tab 頁），點擊查詢後，會自動跳轉到第一個 Tab 頁，如下圖所示：

如何能實現：點擊查詢後，不自動跳轉到第一個 Tab 頁，還是在用戶當前 Tab 頁呢？如下圖所示：

1.2 解決思路

通過在 Tab 塊中設置 JavaScript 腳本來實現此功能。先通過切換事件獲取到用戶當前 Tab 頁的标題索引，然後在點擊查詢後，直接初始化定位到獲取到的 Tab 标題索引頁。

2.1 添加查詢控件

打開模板 %FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\Oldchart\advanced\tab标簽.frm

點擊下載模板：tab标簽.frm

新增一個「參數界面」，添加「查詢」控件，如下圖所示：

2.2 新增 Tab 切換事件

選中 Tab 塊控件，在控件列表中選擇所選 Tab 塊下方的「tabpane0」，新增一個 「Tab切換事件」，如下圖所示：

JS 代碼如下所示：

setTimeout(function()
{ //TAB切換後,獲取到當前TAB塊的标題索引
FR.IndexNum=_g().getWidgetByName("tabpane0").getShowIndex(); 
},50);

2.3 新增初始化後事件

選中 Tab 塊控件，在控件列表中選擇所選 Tab 塊下方的「tabpane0」，新增一個「初始化後事件」，如下圖所示：

JS 代碼如下所示：

this.options.form.getWidgetByName("tabpane0").showCardByIndex(FR.IndexNum);

2.4 效果預覽

2.4.1 PC 端

保存模板，點擊PC端預覽，效果如下圖所示：

2.4.2 移動端

注：該方法支持移動端。

移動端效果（以 App 效果爲例）如下圖所示：

已完成的模板，可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表單JS實例\06-JS實現點擊查詢後停留在當前查詢的tab頁.frm

點擊下載模板：06-JS實現點擊查詢後停留在當前查詢的tab頁.frm