如何滾動到PrimeNG樹中的選定節點

Question

我有一個PrimeNG樹和一個自動填充字段的頁面。我的要求是當用戶輸入並選擇自動填充字段中的文本時，樹應擴展到匹配節點，並且它應滾動到匹配節點並突出顯示該節點。

我試圖通過將'expanded'屬性設置爲'true'來擴展樹。但我找不到滾動到選定節點的方法。任何對此的幫助表示讚賞。

同時請讓我知道是否有任何方法擴展使用選定節點的樹。

Answer 1

可能不是最漂亮的解決方案，但可以通過使用以下util實現此方法。

public scrollToSelectionPrimeNgDataTable(table: DataTable, element: HTMLElement) { 
    if (table.selection !== null && table.value !== null) { 
     let index = table.value.indexOf(table.selection); 
     let list = document.querySelectorAll('tr'); 
     if (list !== null && index < list.length) { 
      let targetElement = list.item(index); 
      targetElement.scrollIntoView() 
     } 
    } 
} 

要使用此方法，您必須將DataTable的引用和表本身作爲HTMLElement傳遞給該方法。你可以通過使用Angular2的@ViewChild修飾器來獲得。

Answer 2

擴大大衛灰粉的答案，這是PrimeNG的樹一個簡單有效的解決方案：

HTML：

<p-tree #mytreeid id="mytree"></p-tree> 

角：

@ViewChild("mytree") mytree: Tree; 

// selection is the TreeNode you want to scroll into view 
scrollToSelectionPrimeNgDataTree(selection, tree, elementIdName) { 
     if (tree.value !== null) { 
      let index = tree.value.indexOf(selection); 
      document.getElementById(elementIdName).querySelectorAll("p-treenode")[index].scrollIntoView(); 
     } 
    }