OrganizationChartOrganizationChart visualized hierarchical organization data.

Org Chart - 图1

Documentation

Import

  2. import {OrganizationChartModule} from 'primeng/organizationchart';
  3.  

Getting Started

OrganizationChart requires a model of TreeNode as its value. More information about TreeNode API is available at documentation of tree component.

  2. import {TreeNode} from 'primeng/api';
  3.  
  2. <p-organizationChart [value]="data"></p-organizationChart>
  3.  
  2. export class MyComponents implements OnInit {
  4.     data: TreeNode[];
  6.     ngOnInit() {
  7.         this.data = [{
  8.             label: 'Root',
  9.             children: [
  10.                 {
  11.                     label: 'Child 1',
  12.                     children: [
  13.                         {
  14.                             label: 'Grandchild 1.1'
  15.                         },
  16.                         {
  17.                             label: 'Grandchild 1.2'
  18.                         }
  19.                     ]
  20.                 },
  21.                 {
  22.                     label: 'Child 2',
  23.                     children: [
  24.                         {
  25.                             label: 'Child 2.1'
  26.                         },
  27.                         {
  28.                             label: 'Child 2.2'
  29.                         }
  30.                     ]
  31.                 }
  32.             ]
  33.         }];
  34. }
  35.  

Templating

Label of the treenode is displayed inside the node content by default and templating enables enhanced customization. TreeNode API has type property which is used to match the pTemplate type so templating can be done per node as well. In example below, nodes with type "leaf" are displayed with bold text. Note that a pTemplate whose type is "default" applies to all nodes that have no type property defined.

  2. <p-organizationChart [value]="data"
  3.     styleClass="company">
  4.     <ng-template let-node pTemplate="leaf">
  5.         <span style="font-weight:bold">{{node.label}}</span>
  6.     </ng-template>
  7.     <ng-template let-node pTemplate="default">
  8.         {{node.label}}
  9.     </ng-template>
  10. </p-organizationChart>
  11.  
  2. export class MyComponents implements OnInit {
  4.     data: TreeNode[];
  6.     ngOnInit() {
  7.         this.data = [{
  8.             label: 'Root',
  9.             children: [
  10.                 {
  11.                     label: 'Child 1',
  12.                     children: [
  13.                         {
  14.                             label: 'Grandchild 1.1', type: 'leaf'
  15.                         },
  16.                         {
  17.                             label: 'Grandchild 1.2', type: 'leaf'
  18.                         }
  19.                     ]
  20.                 },
  21.                 {
  22.                     label: 'Child 2',
  23.                     children: [
  24.                         {
  25.                             label: 'Child 2.1', type: 'leaf'
  26.                         },
  27.                         {
  28.                             label: 'Child 2.2', type: 'leaf'
  29.                         }
  30.                     ]
  31.                 }
  32.             ]
  33.         }];
  34. }
  35.  

Expand/Collapse State

In order to display a treenode as expanded by default, set "expanded" property as true in your model.

Selection

OrganizationChart supports 2 selection methods; single or multiple. Selection is enabled by setting selectionMode property and providing a single TreeNode or an array of TreeNodes to reference the selections depending on the selection mode.

  2. <p-organizationChart [value]="data" selectionMode="single" [(selection)]="selectedNode"></p-organizationChart>
  3.  
  2. export class MyComponents implements OnInit {
  4.     data: TreeNode[];
  6.     ngOnInit() {
  7.         this.data = [{
  8.             label: 'Root',
  9.             children: [
  10.                 {
  11.                     label: 'Child 1,
  12.                     children: [
  13.                         {
  14.                             label: 'Grandchild 1.1', type: 'leaf'
  15.                         },
  16.                         {
  17.                             label: 'Grandchild 1.2', type: 'leaf'
  18.                         }
  19.                     ]
  20.                 },
  21.                 {
  22.                     label: 'Child 2',
  23.                     children: [
  24.                         {
  25.                             label: 'Child 2.1', type: 'leaf'
  26.                         },
  27.                         {
  28.                             label: 'Child 2.2', type: 'leaf'
  29.                         }
  30.                     ]
  31.                 }
  32.             ]
  33.         }];
  34. }
  35.  

Properties

NameTypeDefaultDescription
valuenullTreeNode[]An array of nested TreeNodes.
stylestringnullInline style of the component.
styleClassstringnullStyle class of the component.
selectionModestringnullDefines the selection mode, valid values "single" and "multiple".
selectionanynullA single treenode instance or an array to refer to the selections.

Events

NameParametersDescription
onNodeSelectevent.originalEvent: browser event event.node: Selected node instance.Callback to invoke when a node is selected.
onNodeUnselectevent.originalEvent: browser event event.node: Unselected node instance.Callback to invoke when a node is unselected.

Styling

Following is the list of structural style classes, for theming classes visit theming page.

NameElement
ui-organizationchartContainer element.
ui-organizationchart-tableTable container of a node.
ui-organizationchart-linesConnector lines container.
ui-organizationchart-nodesContained of node children.
ui-organizationchart-line-rightRight side line of a node connector.
ui-organizationchart-line-leftLeft side line of a node connector.
ui-organizationchart-line-topTop side line of a node connector.

Dependencies

None.

Source

View on GitHub

  2. <p-toast [style]="{marginTop: '80px'}"></p-toast>
  4. <h3 class="first">Advanced</h3>
  5. <p>Organization with advanced customization.</p>
  6. <p-organizationChart [value]="data1" selectionMode="single" [(selection)]="selectedNode" (onNodeSelect)="onNodeSelect($event)"
  7.     styleClass="company">
  8.     <ng-template let-node pTemplate="person">
  9.         <div class="node-header ui-corner-top">{node.label}</div>
  10.         <div class="node-content">
  11.             <img src="assets/showcase/images/demo/organization/{node.data.avatar}" width="32">
  12.             <div>{node.data.name}</div>
  13.         </div>
  14.     </ng-template>
  15.     <ng-template let-node pTemplate="department">
  16.         {node.label}
  17.     </ng-template>
  18. </p-organizationChart>
  20. <h3>Basic</h3>
  21. <p>Hierarchical data with zero configuration.</p>
  22. <p-organizationChart [value]="data2"></p-organizationChart>
  23.  
  2. @Component({
  3.     templateUrl: './organizationchartdemo.html',
  4.     providers: [MessageService],
  5.     styles: [`
  6.         .company.ui-organizationchart .ui-organizationchart-node-content.ui-person {
  7.             padding: 0;
  8.             border: 0 none;
  9.         }
  11.         .node-header,.node-content {
  12.             padding: .5em .7em;
  13.         }
  15.         .node-header {
  16.             background-color: #495ebb;
  17.             color: #ffffff;
  18.         }
  20.         .node-content {
  21.             text-align: center;
  22.             border: 1px solid #495ebb;
  23.         }
  25.         .node-content img {
  26.             border-radius: 50%;
  27.         }
  29.         .department-cfo {
  30.             background-color: #7247bc;
  31.             color: #ffffff;
  32.         }
  34.         .department-coo {
  35.             background-color: #a534b6;
  36.             color: #ffffff;
  37.         }
  39.         .department-cto {
  40.             background-color: #e9286f;
  41.             color: #ffffff;
  42.         }
  44.         .ui-person .ui-node-toggler {
  45.             color: #495ebb !important;
  46.         }
  48.         .department-cto .ui-node-toggler {
  49.             color: #8a0a39 !important;
  50.         }
  51.     `],
  52.     encapsulation: ViewEncapsulation.None
  53. })
  54. export class OrganizationChartDemo implements OnInit {
  56.     data1: TreeNode[];
  58.     data2: TreeNode[];
  60.     selectedNode: TreeNode;
  62.     constructor(private messageService: MessageService) {}
  64.     ngOnInit() {
  65.         this.data1 = [{
  66.             label: 'CEO',
  67.             type: 'person',
  68.             styleClass: 'ui-person',
  69.             expanded: true,
  70.             data: {name:'Walter White', 'avatar': 'walter.jpg'},
  71.             children: [
  72.                 {
  73.                     label: 'CFO',
  74.                     type: 'person',
  75.                     styleClass: 'ui-person',
  76.                     expanded: true,
  77.                     data: {name:'Saul Goodman', 'avatar': 'saul.jpg'},
  78.                     children:[{
  79.                         label: 'Tax',
  80.                         styleClass: 'department-cfo'
  81.                     },
  82.                     {
  83.                         label: 'Legal',
  84.                         styleClass: 'department-cfo'
  85.                     }],
  86.                 },
  87.                 {
  88.                     label: 'COO',
  89.                     type: 'person',
  90.                     styleClass: 'ui-person',
  91.                     expanded: true,
  92.                     data: {name:'Mike E.', 'avatar': 'mike.jpg'},
  93.                     children:[{
  94.                         label: 'Operations',
  95.                         styleClass: 'department-coo'
  96.                     }]
  97.                 },
  98.                 {
  99.                     label: 'CTO',
  100.                     type: 'person',
  101.                     styleClass: 'ui-person',
  102.                     expanded: true,
  103.                     data: {name:'Jesse Pinkman', 'avatar': 'jesse.jpg'},
  104.                     children:[{
  105.                         label: 'Development',
  106.                         styleClass: 'department-cto',
  107.                         expanded: true,
  108.                         children:[{
  109.                             label: 'Analysis',
  110.                             styleClass: 'department-cto'
  111.                         },
  112.                         {
  113.                             label: 'Front End',
  114.                             styleClass: 'department-cto'
  115.                         },
  116.                         {
  117.                             label: 'Back End',
  118.                             styleClass: 'department-cto'
  119.                         }]
  120.                     },
  121.                     {
  122.                         label: 'QA',
  123.                         styleClass: 'department-cto'
  124.                     },
  125.                     {
  126.                         label: 'R&D',
  127.                         styleClass: 'department-cto'
  128.                     }]
  129.                 }
  130.             ]
  131.         }];
  133.         this.data2 = [{
  134.             label: 'F.C Barcelona',
  135.             expanded: true,
  136.             children: [
  137.                 {
  138.                     label: 'F.C Barcelona',
  139.                     expanded: true,
  140.                     children: [
  141.                         {
  142.                             label: 'Chelsea FC'
  143.                         },
  144.                         {
  145.                             label: 'F.C. Barcelona'
  146.                         }
  147.                     ]
  148.                 },
  149.                 {
  150.                     label: 'Real Madrid',
  151.                     expanded: true,
  152.                     children: [
  153.                         {
  154.                             label: 'Bayern Munich'
  155.                         },
  156.                         {
  157.                             label: 'Real Madrid'
  158.                         }
  159.                     ]
  160.                 }
  161.             ]
  162.         }];
  163.     }
  165.     onNodeSelect(event) {
  166.         this.messageService.add({severity: 'success', summary: 'Node Selected', detail: event.node.label});
  167.     }
  168. }
  169.