JS實現隐藏Tab塊

1.1 問題描述

用戶希望可以自定義設置 Tab 的展現與隐藏，比如不同用戶可以查看不同的 Tab 塊，或者隐藏一些無關 Tab 頁的内容，該如何實現呢？

如下圖所示，設計界面有 3 個 Tab，預覽時隐藏一個 Tab ，只展示 2 個 Tab。

1.2 解決思路

通過添加 JS 來實現 。

2.1 準備模板

準備内置模板：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\analytics\financial2\生産庫存分析.frm

點擊下載模板：生産庫存分析.frm

打開模板，模板有三個 Tab 塊，如下圖所示，示例通過添加 JS 的方式隐藏  Tab 1。

2.2 添加事件

在決策報表右上角組件列表中，選擇 tabpane0 控件，爲其添加一個「初始化後」事件。如下圖所示：

JavaScript 代碼如下：

this.options.form.getWidgetByName("tabpane0").setTabVisible("tab1", false);

注1：當模板裏有多個 Tab 組合，如有 tabpane0 和 tabpane1 時，通過 this.options.form.getWidgetByName("tabpane0").setTabVisible("tab2", false); 将無法獲取到 tabpane0 的 Tab2。所以此方法不适用決策報表中多個 Tab 組合的場景。

注2：當模板導出時，被隐藏的 Tab 不會被導出。

2.3 效果預覽

保存模板，點擊「PC端預覽」，可以看到第 2 個 Tab已被隐藏，PC 端效果如下圖所示：

App 及 HTML5 效果如下圖所示：

已完成的模板，可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表單JS實例\12-JS實現隐藏tab塊标題-示例二.frm

點擊下載模板：12-JS實現隐藏tab塊标題-示例二.frm