JS實現摺疊樹所有節點一鍵全部展開或收起

1.1 版本

1.2 預期效果

我們製作的複雜摺疊樹或檢視表樹報表，在以資料分析模式預覽時，需要點選父節點，才會展開下一層子節點，當層數比較多的時候，操作比較麻煩。如果使用者想實現一鍵全部展開或收起，效果如下圖所示：

摺疊樹：

1.3 實現思路

可以新增 2 個按鈕，再透過給按鈕新增 JS 程式碼來實現對應的功能。

JS API請參考：資料分析專有

2.1 新增按鈕

開啟 %FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\basic\複雜摺疊樹.cpt 報表，並新增 2 個按鈕元件，按鈕名稱分別為展開、收起。如圖所示：

2.2 新增事件

1）給「展開」按鈕元件新增「點選」事件。如下圖所示：

JavaScript 程式碼如下：

_g().expandAllNodeLayer();

2）給「收起」按鈕元件新增「點選」事件。如下圖所示：

JavaScript 程式碼如下：

_g().collapseAllNodeLayer();

2.3 效果預覽

2.3.1 PC 端

儲存範本，點選「資料分析」，效果如下圖所示：

注：使用新計算引擎的條件下，「分頁預覽」也可實現一鍵展開/收起摺疊樹的效果。

2.3.2 行動端

不支援行動端。

已完成的範本，可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\資料分析JS實體\JS實現摺疊樹/檢視表樹所有節點一鍵全部展開或收起.cpt

點選下載範本：JS實現摺疊樹所有節點一鍵全部展開或收起.cpt