JS實現一鍵展開/收起檢視表樹所有節點

1.1 預期效果

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

1.2 實現思路

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

開啟 %FR_HOME%\webroot\WEB-INF\reportlets\doctw\Primary\widgetReport\檢視表樹報表A.cpt 報表。

2.1 新增元件

在參數面板中新增 2 個按鈕元件，按鈕名稱分別為「全部展開」、「全部收起」，並取消勾選「點選查詢前不顯示報表內容」。如下圖所示：

2.2 新增事件

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

JavaScript 程式碼如下：

var t = 2;   
for(var m = 1; m <= t; m++) {  
    //循環執行“+”號展開  
    $('.fr-tree-elbow-plus').trigger('click');  
    $('.fr-tree-elbow-end-plus').trigger('click');
} 

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

JavaScript 程式碼如下：

//收起的最大節點級值  
var t = 2;   
for(var m = 1; m <= t; m++) {  
    //循環執行“+”號展開  
    $('.fr-tree-elbow-minus').trigger('click');  
}  
$('.fr-tree-elbow-end-minus').trigger('click');

2.3 效果預覽

儲存範本，點選「資料分析」或「填報預覽」，效果如 1.1 節所示。

注1：僅支援「資料分析」或「填報預覽」，不支援「分頁預覽」。

注2：不支援行動端。

點選下載已完成範本 :JS實現一鍵展開收起檢視表樹所有節點.cpt