如何滚动到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(); 
     } 
    }