JS實現下拉框控制摺疊樹展開不同層級

1.1 應用場景

在日常報表製作中，組織樹層級確定且層級過多的情況下，使用者希望實現根據自己查看報表時的需求一鍵展開相應層級的組織樹，如：篩選框輸入2，則組織樹展開至第2層。如下圖所示：

1.2 解決思路

使用範本參數，透過給「查詢按鈕」新增「點選事件」實現下拉框元件控制摺疊樹的展開層級。

JS API的詳細介紹，請參見：資料分析專有

2.1 建立摺疊樹

1）建立資料集，SQL語句為：SELECT * FROM 公司部門

2）建立一個 樹資料集 Tree1，其資料來源於 ds1，設定其原始標記欄位為列序號 1，父標記欄位為列序號 2，如下圖所示：

3）將對應的資料列拖入儲存格中，預設儲存格縱向擴展並設定左父格，其中 A2 儲存格的左父格自訂為 A1，A3 儲存格的左父格自訂為 A2，如下圖所示：

4）A1、A2、A3儲存格都將形態設定為資料查詢 ds1，實際值為列序號1，顯示值為列序號3，如下圖所示：

5）給 A2、A3 儲存格都加相同的條件屬性，隱藏掉沒有資料的行，如下圖所示：

2.2 新增按鈕元件

給新增了資料列的三個儲存格， A1、A2、A3 儲存格新增「按鈕元件」，按鈕類型選擇「樹節點按鈕」。如下圖所示：

2.3 新增下拉框元件

1）選擇「範本>範本參數」，新增範本參數「layer」，如下圖所示：

2）編輯參數面板，在右側的「組件設定」中選擇「全部新增」，元件選擇「下拉框元件」，選擇「標籤元件」，元件值為展開層級：，如下圖所示：

3）選擇「下拉框元件」，將控制設定為「自訂」，實際值和顯示值分別為 0、1、2，如下圖所示：

2.4 新增點選事件

選擇「查詢元件」，在右側的元件設定中選擇「事件」，新增「點選事件」，如下圖所示：

JavaScript 程式碼如下：

var a = _g().getParameterContainer().getWidgetByName("layer").getValue();
setTimeout(function() {
	_g().expandNodeLayer(a);
}, 500) 

2.5 效果預覽

2.5.1 PC 端

儲存報表，點選「資料分析」預覽，效果如 1.2 節中所示。

2.5.2 行動端

不支援行動端。

已完成的範本，可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\GroupReport\JS實現下拉框控制摺疊樹展開不同層級.cpt。

點選下載範本：JS實現下拉框控制摺疊樹展開不同層級.cpt