JS實現自定義折疊樹節點展開層數

1.1 預期效果

在日常報表制作過程中，組織樹形式是非常便捷常用的展示形式。但在使用過程中，當組織樹層級不确定時候，希望能在初始化時候根據需求展開一定層級的樹節點。如下圖所示：

1.2 實現思路

通過給組織樹的每個層級添加樹節點按鈕、添加定位符，最後通過 JS 判斷定位符的位置，點擊樹節點按鈕展開層數。

2.1 準備模板

準備一個組織樹模板。%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\GroupReport\組織樹報表.cpt

具體方法可參考： 組織樹報表示例

點擊可下載模板：組織樹報表.cpt

打開此模板，此處是一個三層的樹結構，如下圖所示：

2.2 添加按鈕

給添加了數據列的三個單元格， A1、A2、A3單元格添加「按鈕控件」，按鈕類型選擇「樹節點按鈕」。如下圖所示：

2.3 添加事件

點擊菜單欄「模板>模板 Web 屬性>數據分析設置」，選擇「爲該模板單獨設置」，添加一個「加載結束」事件，如下圖所示：

JavaScript 代碼如下：

$("#content-container").find("tr").has(".x-treenode-unexpand").each(function(){
if($(this).children().eq(0).text()==1){ //eq（0）表示最左邊的單元格；text（）==1，表示内容爲1的單元格
$(this).find(".x-treenode-unexpand").trigger('click');}})

2.4 添加定位符

1）在需要展開的組織樹節點前，增加 一個數字 1 作爲定位符。并設置定位符的父格，随着部門進行擴展。如下圖所示：

注：定位符可以任意設置，但需與 JS 中 text() 處保持一緻。

2）隐藏A 列。

3）如果想要展開兩級節點，前面步驟均一緻，在第二級部門 ID (即 B2 單元格)前面 A2 單元格輸入定位符 1。設置 A2 單元格左父格爲 B2。如下圖所示：

2.5 效果預覽

保存模板，點擊「數據分析」，只展開第一層樹節點，效果如下圖所示：

展開二級節點，效果如下圖所示：

注：不支持移動端。

已完成的模板，可參見%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\GroupReport\自定義一層樹節點展開.cpt。

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\GroupReport\自定義二層樹節點展開.cpt。

點擊下載模板：自定義二層樹節點展開.cpt     自定義一層樹節點展開.cpt