JS實現點擊超鏈切換Tab塊

1.1 版本

1.2 預期效果

使用者透過點選報表塊儲存格的超級連結，實現 Tab 塊的切換。如下圖所示：

.

1.3 實現思路

使用 JavaScript 型別的超級連結，透過 JS API showCardByIndex，實現 Tab 切換。

2.1 建立範本

建立決策報表，拖入 1 個報表塊和 1 個 Tab 塊，新增 3 個 Tab 標題。範本設計如下圖所示：

2.2 設定超級連結

為 A2、A3、A4 儲存格新增超級連結。選中 A2 儲存格，點選「超級連結」，新增「JavaScript 腳本」，新增 JS 代碼，如下圖所示：

各儲存格超級連結的 JavaScript 代碼如下表所示：

A2儲存格：

_g().getWidgetByName("tabpane0").showCardByIndex(0);

A3儲存格：

_g().getWidgetByName("tabpane0").showCardByIndex(1);

A4儲存格：

_g().getWidgetByName("tabpane0").showCardByIndex(2);

注：tabpane0 是指整個 tabpane0物件，index 是指的索引，從 0 開始。

若需要點選超連結跳轉並傳遞參數可以在代碼中新增一句傳遞參數的語句並設定參數。如下圖所示：

實現了點選報表塊「標題0」超連結時，跳轉到對應的 Tab塊，並傳遞參數 TabName 的值給對應的 Tab塊，其中 TabName 的值為 A2 儲存格的值。在對應 Tab 塊中，輸入 $TabName 即可引用參數。

JavaScript 代碼如下：

//切換Tab塊
_g().getWidgetByName("tabpane0").showCardByIndex(0);
//傳遞參數
_g().getWidgetByName('REPORT1').gotoPage(1, {
"TabName": aa
}, 'true');

2.3 效果預覽

2.3.1 PC端

儲存範本，點選預覽，效果如 1.2 預期效果所示。

2.3.2 行動端

App 和 HTML5 端預覽效果相同，如下圖所示：

.

已完成的範本可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表單JS實體\09-JS實現點選超連結切換TAB頁.frm

點選下載範本：09-JS實現點選超連結切換TAB頁.frm

如果安裝了新自適應插件出現報錯：COST0M JS ERROR:CAN NOT READ PROPERTY 'FORM ' OF UNDEFINED

您可以升級自適應插件版本或修改代碼：

_g().getWidgetByName("tabpane0").showCardByIndex(2);