угловое дерево материалов для отображения организационной структуры

Я хочу отобразить организационную структуру, используя угловое дерево материалов с должностью, зарплатой, годом работы в качестве свойств.

class Employee {
  name: string;
  position: string;
  salary: number;
  yearofServices: number;
  reports: Employee[];
 }

Например,

[ 
  {id: 1,
   name:'employee1',
   position: 'president',
   salary: 250000,
   yearofServices: 20,
   reports: [
    {
      id: 2,
      name:'employee2',
      position: 'manager',
      salary: 200000,
       yearofServices: 10,
    },
   {
      id: 3,
      name:'employee3',
      position: 'manager',
      salary: 190000,
       yearofServices: 15,
    }
   ];
]

Мы хотим отобразить четыре столбца:

Имя Должность Заработная плата Год

Столбец имени представляет собой древовидную структуру в соответствии с иерархией отчетов организации. Например, если у менеджера три отчета, у управляющего узла будет три подузла.

Можно ли это сделать с помощью элемента управления угловым деревом материалов?


angular angular-material angular-cdk treeview
person user3097695    schedule 08.10.2019    source источник
comment
Я отправлял ответ, но потом подумал, что было немного непонятно, где вы спрашиваете mat-tree для отображения дерева, поэтому, конечно, у вас могут быть подузлы, у которых есть подузлы, у которых есть подузлы, и так далее. Проблема только в том, что вы хотите отобразить в столбце с именем? только имена внутри отчетов или вся информация. Зачем вам нужны столбцы, почему бы вам просто не использовать единую древовидную структуру?   -  person JSmith    schedule 09.10.2019
comment
@JSmith У меня есть требование отображать каждую запись в строке в виде таблицы. Первый столбец больше похож на древовидную структуру. Пользователи могут увеличивать или уменьшать строки.   -  person user3097695    schedule 09.10.2019

Ответы (2)


arrow_upward
2
arrow_downward

Это возможно, см. Пример здесь: https://stackblitz.com/edit/angular-m77g7e-semvxp?file=app%2Ftable-basic-example.html

Ссылка на https://github.com/angular/components/issues/15187.

Другой вариант - иметь два mat-tree компонента, один для обхода иерархии, другой для фиксированных столбцов. Вы можете использовать treeControl.isExpanded(node) для переключения видимости обоих компонентов. (Это также будет работать для компонента cdk-tree.)

person Avi Kaminetzky    schedule 24.12.2019

arrow_upward
2
arrow_downward

Конечно возможно! Это просто директива, разрешающая HTML.

введите описание изображения здесь

Я не заглушал его полностью, но суть очень проста:

  const TREE_DATA: Employee[] = [
  {
    name: 'Bob',
    position:'President of Lattes'    
  }, {
    name: 'Becky',
    position: 'Manager Of Latte Presidents',
    reports: [{
        name: 'Bob',
        position:'President of Lattes'  
      }, {
        name: 'Steve',
        position: 'President of Mocha-Locha'
      },
      {
        name: 'Arnie',
        position: 'President of Tepid-Teas',
        reports: [
           {
              name: 'Mick',
              position: 'Loose orders for loose leaf'
           },
           {
              name: 'Michelle',
              position: 'The First With The Green'
           }
        ]
      }
      ]
  },
];

И HTML

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="example-tree">


<!-- This is the tree node template for leaf nodes -->
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
    <li class="mat-tree-node">
      <!-- use a disabled button to provide padding for tree leaf -->
      <button mat-icon-button disabled></button>
      <div class="container-fluid">
          <div class="row">
              <div class="col">{{node.name}}</div>
              <div class="col">{{node.position}}</div>
              <div class="col">salary here</div>
              <div class="col">Years of Service</div>
          </div>
        </div>
    </li>
  </mat-tree-node>
  <!-- This is the tree node template for expandable nodes -->
  <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
    <li>
      <div class="mat-tree-node ">
        <button mat-icon-button matTreeNodeToggle
                [attr.aria-label]="'toggle ' + node.name">
          <mat-icon class="mat-icon-rtl-mirror">
            {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
          </mat-icon>
        </button>
        <div class="container-fluid">
          <div class="row">
              <div class="col">{{node.name}}</div>
              <div class="col">{{node.position}}</div>
              <div class="col">salary</div>
              <div class="col">0</div>
          </div>
        </div>
      </div>
      <ul [class.example-tree-invisible]="!treeControl.isExpanded(node)">
        <ng-container matTreeNodeOutlet></ng-container>
      </ul>
    </li>
  </mat-nested-tree-node>
</mat-tree>

И чтобы убедиться в этом, вы можете проверить StackBlitz

person Austin T French    schedule 08.10.2019
comment
Проблема в том, что столбец не выровнен по вертикали. У меня такой же дисплей с левым полем. - person user3097695; 09.10.2019
comment
@ user3097695 Согласен, это проблема из коробки. Однако вы не задавали этот вообще в своем исходном вопросе. Пожалуйста, уделите секунду размышлениям о том, что вы на самом деле спросили, а не о том, что вы имели в виду. Я бы предложил задать для этого более полный вопрос (поскольку, похоже, вы имели в виду что-то другое), а не перемещать целевые сообщения по вашему текущему вопросу ... (и закрывать / принимать / удалять этот, как вы считаете нужным) - person Austin T French; 09.10.2019
comment
Спасибо, что так быстро нашли решение. Я проголосовал за ваше решение. Но мне все еще нужно решить мою проблему. - person user3097695; 09.10.2019
comment
@ user3097695 Я это точно понимаю! Я бы задал вопрос, как выровнять столбцы, вложенные в дерево, с вашим текущим кодом. Таким образом люди могут попытаться решить вашу актуальную проблему. - person Austin T French; 09.10.2019