JS實現折疊樹/視圖樹所有節點一鍵全部展開或收起

1.1 問題描述

我們制作的複雜折疊樹或視圖樹報表，在以數據分析模式預覽時，需要點擊父節點，才會展開下一層子節點，當層數比較多的時候，操作比較麻煩。如果用戶想實現一鍵全部展開或收起，如何實現呢？

折疊樹：

視圖樹：

1.2 實現思路

可以添加 2 個按鈕，再通過給按鈕添加點擊事件來實現對應的功能。

2.1 折疊樹示例

2.1.1 添加按鈕

打開 %FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\basic\複雜折疊樹.cpt 報表，并添加 2 個按鈕。如圖所示：

2.1.2 添加事件

1）給「展開」按鈕控件添加「點擊」事件。如下圖所示：

JavaScript 代碼如下：

//展開的最大節點級值
var t = 3; 
for(var m = 1; m <= t; m++) {
//循環執行“+”号展開
    $('.x-treenode-unexpand').trigger('click');
}
for(var n = 1; n <= 2; n++) {
//執行點擊2次(下标從0開始)第1個樣式爲“fr-widget-click”的元素，定位光标
    $('.fr-widget-click').eq(0).trigger('click');
}

2）給「展開」按鈕控件添加「點擊」事件。如下圖所示：

JavaScript 代碼如下：

var t = 3;
for(var m = 1; m <= t; m++) {
//循環執行“-”号收起
    $('.x-treenode-expand').trigger('click');
}
for(var n = 1; n<= 2; n++){
//執行點擊2次(下标從0開始)第1個樣式爲“fr-widget-click”的元素，定位光标
$('.fr-widget-click').eq(0).trigger('click');
}

2.1.3 效果預覽

保存模板，點擊「數據分析」，效果如下圖所示：

2.2 視圖樹示例

2.2.1 添加按鈕

打開 %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\widgetReport\singletree.cpt 報表。

A1 單元格單元格添加「視圖樹控件」，并在參數面板中添加 2 個按鈕，删掉「查詢按鈕」，并取消勾選「擊查詢前不顯示報表内容」。如下圖所示：

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.2.3 效果預覽

保存模板，點擊「數據分析」，效果如下所示：

已完成的模板，可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\數據分析JS實例\02-JS實現折疊樹/視圖樹所有節點一鍵全部展開或收起.cpt

點擊下載模板：JS實現折疊樹/視圖樹所有節點一鍵全部展開或收起.cpt