［通用］JS實現折疊展開組件

1.1 版本

1.2 預期效果

用戶可通過 折疊展開樣式 功能實現移動端折疊展開組件（報表塊/圖表塊），但是必須設置組件标題，且無法同時支持「允許全屏」按鈕。

1）用戶希望在不設置組件标題時，實現移動端折疊展開組件功能。

2）用戶希望同時使用「允許全屏」和「折疊展開按鈕」按鈕。

如下圖所示：

1.3 實現思路

用戶可通過 JavaScript 代碼控制報表塊的折疊與展開。

注1：模板需勾選移動端重布局。

注2：手機橫屏下不支持該功能。

注3：僅可支持使用「允許全屏」和「折疊展開」按鈕，不支持在全屏狀态下展開收起組件。

2.1 模板準備

打開模板：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\Phone\industry\零售集團實時監控-phone.frm

點擊下載模板：零售集團實時監控-phone.frm

2.2 設置展開收起

點擊組件設置>report0>移動端，設置展開收起自定義，設置顯示按鈕從第4行開始收起，不顯示展示按鈕，默認收起，如下圖所示：

2.3 設置超級鏈接

1）插入普通文本

雙擊報表塊report0，合并B1~C1單元格，點擊單元格元素，插入普通文本：展開與收起，如下圖所示：

2）插入超級鏈接

選中 B1單元格，點擊超級鏈接，插入 JavaScript 腳本，輸入 JavaScript 代碼，如下圖所示：

JavaScript 代碼如下：

_g().options.form.getWidgetByName("report0").toggleCollapsed()

2.4 效果預覽

保存模板，點擊移動端預覽。

用戶可自定義「折疊展開按鈕」位置，以防與「允許全屏」按鈕沖突。

報表塊不設置标題時，不影響「展開收起」功能的使用。

如下圖所示：

本示例的「折疊展開按鈕」可以跟随組件「展開收起」狀态的變化而改變。

3.1 模板準備

打開模板：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\Phone\industry\零售集團實時監控-phone.frm

點擊下載模板：零售集團實時監控-phone.frm

3.2 設置展開收起

點擊組件設置>report0>移動端，設置展開收起自定義，設置顯示按鈕從第2行開始收起，不顯示展示按鈕，默認展開，如下圖所示：

3.3 設置文本控件

添加一個文本控件，設置組件名稱爲aa，設置組件不可見，設置控件值爲點擊折疊∧，如下圖所示：

注：由於 3.2 節設置了組件默認狀态爲「展開」，所以初始控件值設置爲「點擊折疊∧」

       若組件默認狀态爲「收起」，則初始控件值設置爲「點擊展開∨」

3.4 設置條件屬性

雙擊報表塊report0，合并B1~D1單元格，點擊單元格元素，插入公式=$aa，如下圖所示：

3.4.1 展開轉換爲折疊狀态

選中B1單元格，插入條件屬性，屬性添加超級鏈接，勾選使用鏈接，設置公式條件$aa='點擊展開∨'，如下圖所示：

編輯條件屬性中的超級鏈接，插入 JavaScript 腳本，輸入 JavaScript 代碼，如下圖所示：

JavaScript 代碼如下：

_g().options.form.getWidgetByName("report0").toggleCollapsed();
_g().options.form.getWidgetByName("aa").setValue("點擊折疊∧");

3.4.2 折疊轉換爲展開狀态

選中B1單元格，插入條件屬性，屬性添加超級鏈接，勾選使用鏈接，設置公式條件$aa='點擊折疊∧'，如下圖所示：

編輯條件屬性中的超級鏈接，插入 JavaScript 腳本，輸入 JavaScript 代碼，如下圖所示：

JavaScript 代碼如下：

_g().options.form.getWidgetByName("report0").toggleCollapsed();
_g().options.form.getWidgetByName("aa").setValue("點擊展開∨");

3.5 效果預覽

保存模板，點擊移動端預覽。自定義的「折疊展開按鈕」可以跟随組件「展開收起」狀态的變化而改變。如下圖所示：

注：本示例只能實現圖表塊折疊功能，如需實現圖表塊展開與折疊的效果，請參見：「通用」折疊展開樣式 

4.1 模板準備

打開模板：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\Phone\industry\零售集團實時監控-phone.frm

點擊下載模板：零售集團實時監控-phone.frm

4.2 設置展開收起

點擊組件設置>chart0>移動端，設置展開收起自定義，不顯示展示按鈕，默認展開，如下圖所示：

4.3 設置圖表特效

雙擊圖表塊chart0，點擊特效>交互屬性>添加鏈接>JavaScript，添加 JavaScript 語句，如下圖所示：

JavaScript 代碼如下：

_g().options.form.getWidgetByName("chart0").toggleCollapsed()

4.4 效果預覽

保存模板，點擊移動端預覽，點擊圖表塊可折疊該組件，如下圖所示：

1）示例一

已完成模板請參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\phone\JS\JS實現報表塊靜态折疊展開按鈕.frm

點擊下載模板：JS實現報表塊靜态折疊展開按鈕.frm

2）示例二

已完成模板請參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\phone\JS\JS實現報表塊動态折疊展開按鈕.frm

點擊下載模板：JS實現報表塊動态折疊展開按鈕.frm

3）示例三

已完成模板請參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\phone\JS\JS實現圖表塊折疊功能.frm

點擊下載模板：JS實現圖表塊折疊功能.frm