Как прокрутить выбранный узел в дереве PrimeNG

Question

У меня есть страница с деревом PrimeNG и поле автозаполнения. Мое требование: Дерево должно быть расширено до соответствующего узла, когда пользователь вводит и выбирает текст в поле автозаполнения, а также должен прокручиваться до соответствующего узла и выделять узел.

Я попытался расширить дерево, установив свойство «expand» в значение «true». Но я не нахожу способ прокрутки к выбранному узлу. Любая помощь по этому поводу ценится.

Также, пожалуйста, дайте мне знать, существует ли какой-либо метод, который расширяет дерево с помощью выбранного узла.

Answer 1

Возможно, это не самое красивое решение, но вы можете добиться этого, используя следующий способ утилизации.

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(); 
     } 
    }