Условное оформление PrimeNG TreeNodes с использованием шаблонов - PullRequest
Новая
       52

Условное оформление PrimeNG TreeNodes с использованием шаблонов

0 голосов
/ 12 июня 2018

Мне хорошо известно, как можно стилизовать все узлы одновременно, но мне нужно добавить один стиль, если узел является листом (у узла есть дети), но нет родителя, и если у узла есть родительский элемент, но нетдети.Вот мой код. 

<p-tree [value]="nodes" layout="horizontal">
        <ng-template let-node pTemplate="default">
                <p>ADD CONTENT HERE</p>
        </ng-template>
    </p-tree>

Проверка стилей после визуализации показывает, что класс, который мне нужно изменить для каждого из двух условий, равен ui-treenode

enter image description here

Добавление классов к атрибуту styleClass в p-tree позволяет стилизовать каждый узел, но я не могу установить здесь что-либо условно.Добавление условного стиля в шаблон не работает так, как я хочу, так как pTemplate отображает стили, которые мне нужно изменить.

Я прочитал документацию PrimeNG несколько раз, и я не нашел никакого решения для этого,Есть что-то встроенное или, возможно, жизнеспособная работа вокруг?

EDIT Riscie предложил решение, но класс, добавленный в его демонстрации, намного глубже, чем тот, который мне нужно изменить.Класс ui-treenode расположен в верхней части окна консоли, где пользовательский класс leaf-style расположен глубже в нижней части окна консоли.

enter image description here

Так зачем мне менять этот конкретный стиль?Потому что это добавляет некоторый отступ к узлу - который я хочу удалить в некоторых случаях, а не во всех случаях.

ВТОРОЕ РЕДАКТИРОВАНИЕ

Это может быть не лучшим способом иЯ не уверен в его совместимости с браузером, но он работает как задумано.

Во-первых, добавьте id в первый div внутри шаблона: id="{{node.data.id}}" Во-вторых, переберите все узлы в ngAfterViewInit, извлеките узел по id иближайший родительский класс с классом ui-treenode и добавление классов в соответствии с условиями: 

ngAfterViewInit(): void {
 jQuery('.ui-tree-toggler').addClass('d-none');
 jQuery('.ui-treenode-content').addClass('shadow');
 jQuery('.ui-treenode-content').addClass('fp-tree-node');

 this.nodes.forEach(node => {
    this.setClasses(node);
 });
}

setClasses(node: TreeNode) {
 if(!node.children || node.children.length === 0) {
   let thisNode = jQuery(`#${node.data.id}`);
   let styleParent = thisNode.closest(".ui-treenode")
   styleParent[0].classList.add("pl-0");
 }

 if(!node.data.parentId) {
  let thisNode = jQuery(`#${node.data.id}`);
  let styleParent = thisNode.closest(".ui-treenode")
  styleParent[0].classList.add("pr-0");
 }

 if (node.children && node.children.length > 0) {
    node.children.forEach(child => {
      this.setClasses(child);
    });
 }
}

1 Ответ

0 голосов
/ 12 июня 2018 
<p-tree [value]="nodes" layout="horizontal">
    <ng-template let-node pTemplate="default">
        <p 
            [class.leaf-style]="node.leaf" 
            [class.no-leaf-style]="!node.leaf"
        >
             ADD CONTENT HERE
        </p>
    </ng-template>
</p-tree>

Затем используйте классы .leaf-style и .no-leaf-style в вашей таблице стилей.

Обновление:

Должно работать: См .: https://stackblitz.com/edit/primeng-xzmmf9

...