JS實現隐藏決策報表組件

1.1 問題描述

不勾選決策報表組件屬性>基本下的可見，可在前端展示時隐藏決策報表組件，但是無法自由切換隐藏或顯示。

那麽如何才能在前端預覽時自由切換組件隐藏或顯示呢？效果如下圖所示：

1.2 實現思路

決策報表中添加 2 個按鈕，分别添加點擊事件，實現隐藏和顯示組件功能。

2.1 準備模板

打開内置模板：門店分析.frm

點擊下載模板：門店分析.frm

2.2 添加按鈕

拖入兩個按鈕控件，分别将按鈕名稱修改爲隐藏、顯示，如下圖所示：

2.3 添加隐藏事件

選中隐藏按鈕，添加點擊事件，點擊即可隐藏 report0 組件，如下圖所示：

JavaScript 代碼如下：

this.options.form.getWidgetByName('report0').setVisible(false);  //隐藏報表塊

注：report0 是報表塊名，如果是需要隐藏圖表塊，換成圖表塊名即可。

2.4 添加顯示事件

選中顯示按鈕，添加點擊事件，點擊即可顯示 report0 組件，如下圖所示：

JavaScript 代碼如下：

this.options.form.getWidgetByName('report0').setVisible(true); //顯示報表塊

注：上述點擊事件的寫法，只适用於按鈕控件在 body 内，當按鈕控件在參數面板内時，需要使用另外一種寫法，JavaScript 如下：

_g().getWidgetByName('report0').setVisible(true); //顯示
_g().getWidgetByName('report0').setVisible(false); //隐藏

2.5 效果預覽

2.5.1 PC 端

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

2.5.2 移動端

同時支持 App 端和 H5 端預覽，效果如下圖所示：

已完成模板可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表單JS實例\10-JS隐藏決策報表内報表塊或圖表塊.frm

點擊下載模板：10-JS隐藏決策報表内報表塊或圖表塊.frm

1）只支持隐藏報表塊、圖表塊。

2）組件不可見時，導出時必須增加 sessionID，不然連同隐藏組件會一起導出。

3）自适應布局下，組件隐藏後觸發自适應效果，被隐藏組件的位置會被旁邊的組件占用。如果是絕對布局，被隐藏組件的位置會空出來，如下圖所示：