[通用]JS實現摺疊展開組件

1.1 版本

1.2 預期效果

使用者可透過 [通用]摺疊展開樣式 功能實現行動端摺疊展開組件（報表塊/圖表塊），但是必須設定組件標題，且無法同時支援「允許全螢幕」按鈕。

1）使用者希望在不設定組件標題時，實現行動端摺疊展開組件功能。

2）使用者希望同時使用「允許全螢幕」和「摺疊展開按鈕」按鈕。

如下圖所示：

1.3 實現思路

使用者可透過 JavaScript 程式碼控制報表塊的摺疊與展開。

注1：toggleCollapsed API僅支援決策報表，不支援普通報表和 FVS 視覺化看板。

注2：範本需勾選行動端重佈局。

注3：手機橫屏下不支援該功能。

注4：僅可支援使用「允許全螢幕」和「摺疊展開」按鈕，不支援在全螢幕狀態下展開收起組件。

2.1 範本準備

點選下載範本：零售集團實時監視-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 範本準備

點選下載範本：零售集團實時監視-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 範本準備

點選下載範本：零售集團實時監視-phone.frm

4.2 設定展開收起

點選「組件設定」>「chart0」>「行動端」，設定展開收起「自訂」，「不顯示」展示按鈕，預設「展開」，如下圖所示：

4.3 設定圖表特效

雙擊圖表塊「chart0」，點選「特效」>「交互屬性」>「新增連結」>「JavaScript」，新增 JavaScript 語句，如下圖所示：

JavaScript 程式碼如下：

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

4.4 效果預覽

儲存範本，點選「行動端預覽」，點選圖表塊可摺疊該組件，如下圖所示：

1）範例一

點選下載範本：JS實現報表塊靜態摺疊展開按鈕.frm

2）範例二

點選下載範本：JS實現報表塊動態摺疊展開按鈕.frm

3）範例三

點選下載範本：JS實現圖表塊摺疊功能.frm