Дерево
PrimeNG/Tree (opens in a new tab)
Дерево используется для отображения иерархических данных.
С чего начать
Подключите модуль
import { TreeModule } from 'primeng/tree';В .ts файле
import { ChangeDetectionStrategy, Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { TreeNode } from 'primeng/api';
@Component({
selector: 'app-prime-tree',
templateUrl: './prime-tree.component.html',
styleUrls: ['./prime-tree.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class PrimeTreeComponent implements OnInit {
filesBasic: TreeNode[] = fileBasic;
filesProg: TreeNode[] = fileProg;
filestemplating: TreeNode[] = fileTemplating;
filesSingleSelection: TreeNode[] = fileSingleSelection;
filesMultipleSelectionMeta: TreeNode[] = fileMultipleSelectionMeta;
filesMultipleSelectionCheckbox: TreeNode[] = fileMultipleSelectionCheckbox;
filesLenientFilter: TreeNode[] = fileLenientFilter;
filesStrictFilter: TreeNode[] = fileStrictFilter;
filesRegularScroll: TreeNode[] = fileRegularScroll;
filesFlexibleViewport: TreeNode[] = fileFlexibleViewport;
filesVirtualScroll: TreeNode[] = fileVirtualScroll;
filesHorizontal: TreeNode[] = fileHorizontal;
filesLazy: TreeNode[] = fileLazy;
selectedFile?: TreeNode;
selectedFile1?: TreeNode;
selectedFile2?: TreeNode;
selectedFile3?: TreeNode;
selectedFile4?: TreeNode;
dialogVisible: boolean;
loading: boolean;
constructor(private ref: ChangeDetectorRef) {}
ngOnInit(): void {
this.filesVirtualScroll = Array.from({length: 50}).map((_,i) => this.createNode(i, 1000));
this.loading = true;
setTimeout(() => {
this.loading = false;
this.ref.detectChanges();
}, 5000);
}
expandAll() {
this.filesProg.forEach((node) => {
this.expandRecursive(node, true);
});
}
collapseAll() {
this.filesProg.forEach((node) => {
this.expandRecursive(node, false);
});
}
showDialog() {
this.dialogVisible = true;
}
createNode(i: number, children: number): TreeNode {
let node: TreeNode = {
label: 'Node ' + i,
data: 'Node ' + i,
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: Array.from({ length: children }).map((_, j) => {
return {
label: 'Node ' + i + '.' + j,
data: 'Node ' + i + '.' + j,
icon: 'pi pi-file-o'
}
})
};
return node;
}
private expandRecursive(node: TreeNode, isExpand: boolean) {
node.expanded = isExpand;
if (node.children) {
node.children.forEach((childNode) => {
this.expandRecursive(childNode, isExpand);
});
}
}
}
const fileBasic: TreeNode[] = [
{
label: 'Documents',
data: 'Documents Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'Work',
data: 'Work Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'Expenses.doc',
icon: 'pi pi-file',
data: 'Expenses Document',
},
{
label: 'Resume.doc',
icon: 'pi pi-file',
data: 'Resume Document',
},
],
},
{
label: 'Home',
data: 'Home Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'Invoices.txt',
icon: 'pi pi-file',
data: 'Invoices for this month',
},
],
},
],
},
{
label: 'Pictures',
data: 'Pictures Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'barcelona.jpg',
icon: 'pi pi-image',
data: 'Barcelona Photo',
},
{
label: 'logo.jpg',
icon: 'pi pi-image',
data: 'PrimeFaces Logo',
},
{
label: 'primeui.png',
icon: 'pi pi-image',
data: 'PrimeUI Logo',
},
],
},
{
label: 'Movies',
data: 'Movies Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'Al Pacino',
data: 'Pacino Movies',
children: [
{
label: 'Scarface',
icon: 'pi pi-video',
data: 'Scarface Movie',
},
{
label: 'Serpico',
icon: 'pi pi-video',
data: 'Serpico Movie',
},
],
},
{
label: 'Robert De Niro',
data: 'De Niro Movies',
children: [
{
label: 'Goodfellas',
icon: 'pi pi-video',
data: 'Goodfellas Movie',
},
{
label: 'Untouchables',
icon: 'pi pi-video',
data: 'Untouchables Movie',
},
],
},
],
},
];
const fileProg: TreeNode[] = [
{
label: 'Documents',
data: 'Documents Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'Work',
data: 'Work Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'Expenses.doc',
icon: 'pi pi-file',
data: 'Expenses Document',
},
{
label: 'Resume.doc',
icon: 'pi pi-file',
data: 'Resume Document',
},
],
},
{
label: 'Home',
data: 'Home Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'Invoices.txt',
icon: 'pi pi-file',
data: 'Invoices for this month',
},
],
},
],
},
{
label: 'Pictures',
data: 'Pictures Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'barcelona.jpg',
icon: 'pi pi-image',
data: 'Barcelona Photo',
},
{
label: 'logo.jpg',
icon: 'pi pi-image',
data: 'PrimeFaces Logo',
},
{
label: 'primeui.png',
icon: 'pi pi-image',
data: 'PrimeUI Logo',
},
],
},
{
label: 'Movies',
data: 'Movies Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'Al Pacino',
data: 'Pacino Movies',
children: [
{
label: 'Scarface',
icon: 'pi pi-video',
data: 'Scarface Movie',
},
{
label: 'Serpico',
icon: 'pi pi-video',
data: 'Serpico Movie',
},
],
},
{
label: 'Robert De Niro',
data: 'De Niro Movies',
children: [
{
label: 'Goodfellas',
icon: 'pi pi-video',
data: 'Goodfellas Movie',
},
{
label: 'Untouchables',
icon: 'pi pi-video',
data: 'Untouchables Movie',
},
],
},
],
},
];
const fileTemplating: TreeNode[] = [
{
key: '0',
label: 'Introduction',
children: [
{ key: '0-0', label: 'What is Angular', data: 'https://angular.io', type: 'url' },
{ key: '0-1', label: 'Getting Started', data: 'https://angular.io/guide/setup-local', type: 'url' },
{ key: '0-2', label: 'Learn and Explore', data: 'https://angular.io/guide/architecture', type: 'url' },
{ key: '0-3', label: 'Take a Look', data: 'https://angular.io/start', type: 'url' }
]
},
{
key: '1',
label: 'Components In-Depth',
children: [
{ key: '1-0', label: 'Component Registration', data: 'https://angular.io/guide/component-interaction', type: 'url' },
{ key: '1-1', label: 'User Input', data: 'https://angular.io/guide/user-input', type: 'url' },
{ key: '1-2', label: 'Hooks', data: 'https://angular.io/guide/lifecycle-hooks', type: 'url' },
{ key: '1-3', label: 'Attribute Directives', data: 'https://angular.io/guide/attribute-directives', type: 'url' }
]
}
];
const fileSingleSelection: TreeNode[] = [
{
label: 'Documents',
data: 'Documents Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'Work',
data: 'Work Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'Expenses.doc',
icon: 'pi pi-file',
data: 'Expenses Document',
},
{
label: 'Resume.doc',
icon: 'pi pi-file',
data: 'Resume Document',
},
],
},
{
label: 'Home',
data: 'Home Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'Invoices.txt',
icon: 'pi pi-file',
data: 'Invoices for this month',
},
],
},
],
},
{
label: 'Pictures',
data: 'Pictures Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'barcelona.jpg',
icon: 'pi pi-image',
data: 'Barcelona Photo',
},
{
label: 'logo.jpg',
icon: 'pi pi-image',
data: 'PrimeFaces Logo',
},
{
label: 'primeui.png',
icon: 'pi pi-image',
data: 'PrimeUI Logo',
},
],
},
{
label: 'Movies',
data: 'Movies Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'Al Pacino',
data: 'Pacino Movies',
children: [
{
label: 'Scarface',
icon: 'pi pi-video',
data: 'Scarface Movie',
},
{
label: 'Serpico',
icon: 'pi pi-video',
data: 'Serpico Movie',
},
],
},
{
label: 'Robert De Niro',
data: 'De Niro Movies',
children: [
{
label: 'Goodfellas',
icon: 'pi pi-video',
data: 'Goodfellas Movie',
},
{
label: 'Untouchables',
icon: 'pi pi-video',
data: 'Untouchables Movie',
},
],
},
],
},
];
const fileMultipleSelectionMeta: TreeNode[] = [
{
label: 'Documents',
data: 'Documents Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'Work',
data: 'Work Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'Expenses.doc',
icon: 'pi pi-file',
data: 'Expenses Document',
},
{
label: 'Resume.doc',
icon: 'pi pi-file',
data: 'Resume Document',
},
],
},
{
label: 'Home',
data: 'Home Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'Invoices.txt',
icon: 'pi pi-file',
data: 'Invoices for this month',
},
],
},
],
},
{
label: 'Pictures',
data: 'Pictures Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'barcelona.jpg',
icon: 'pi pi-image',
data: 'Barcelona Photo',
},
{
label: 'logo.jpg',
icon: 'pi pi-image',
data: 'PrimeFaces Logo',
},
{
label: 'primeui.png',
icon: 'pi pi-image',
data: 'PrimeUI Logo',
},
],
},
{
label: 'Movies',
data: 'Movies Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'Al Pacino',
data: 'Pacino Movies',
children: [
{
label: 'Scarface',
icon: 'pi pi-video',
data: 'Scarface Movie',
},
{
label: 'Serpico',
icon: 'pi pi-video',
data: 'Serpico Movie',
},
],
},
{
label: 'Robert De Niro',
data: 'De Niro Movies',
children: [
{
label: 'Goodfellas',
icon: 'pi pi-video',
data: 'Goodfellas Movie',
},
{
label: 'Untouchables',
icon: 'pi pi-video',
data: 'Untouchables Movie',
},
],
},
],
},
];
const fileMultipleSelectionCheckbox: TreeNode[] = [
{
label: 'Documents',
data: 'Documents Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'Work',
data: 'Work Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'Expenses.doc',
icon: 'pi pi-file',
data: 'Expenses Document',
},
{
label: 'Resume.doc',
icon: 'pi pi-file',
data: 'Resume Document',
},
],
},
{
label: 'Home',
data: 'Home Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'Invoices.txt',
icon: 'pi pi-file',
data: 'Invoices for this month',
},
],
},
],
},
{
label: 'Pictures',
data: 'Pictures Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'barcelona.jpg',
icon: 'pi pi-image',
data: 'Barcelona Photo',
},
{
label: 'logo.jpg',
icon: 'pi pi-image',
data: 'PrimeFaces Logo',
},
{
label: 'primeui.png',
icon: 'pi pi-image',
data: 'PrimeUI Logo',
},
],
},
{
label: 'Movies',
data: 'Movies Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'Al Pacino',
data: 'Pacino Movies',
children: [
{
label: 'Scarface',
icon: 'pi pi-video',
data: 'Scarface Movie',
},
{
label: 'Serpico',
icon: 'pi pi-video',
data: 'Serpico Movie',
},
],
},
{
label: 'Robert De Niro',
data: 'De Niro Movies',
children: [
{
label: 'Goodfellas',
icon: 'pi pi-video',
data: 'Goodfellas Movie',
},
{
label: 'Untouchables',
icon: 'pi pi-video',
data: 'Untouchables Movie',
},
],
},
],
},
];
const fileLenientFilter: TreeNode[] = [
{
label: 'Documents',
data: 'Documents Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'Work',
data: 'Work Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'Expenses.doc',
icon: 'pi pi-file',
data: 'Expenses Document',
},
{
label: 'Resume.doc',
icon: 'pi pi-file',
data: 'Resume Document',
},
],
},
{
label: 'Home',
data: 'Home Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'Invoices.txt',
icon: 'pi pi-file',
data: 'Invoices for this month',
},
],
},
],
},
{
label: 'Pictures',
data: 'Pictures Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'barcelona.jpg',
icon: 'pi pi-image',
data: 'Barcelona Photo',
},
{
label: 'logo.jpg',
icon: 'pi pi-image',
data: 'PrimeFaces Logo',
},
{
label: 'primeui.png',
icon: 'pi pi-image',
data: 'PrimeUI Logo',
},
],
},
{
label: 'Movies',
data: 'Movies Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'Al Pacino',
data: 'Pacino Movies',
children: [
{
label: 'Scarface',
icon: 'pi pi-video',
data: 'Scarface Movie',
},
{
label: 'Serpico',
icon: 'pi pi-video',
data: 'Serpico Movie',
},
],
},
{
label: 'Robert De Niro',
data: 'De Niro Movies',
children: [
{
label: 'Goodfellas',
icon: 'pi pi-video',
data: 'Goodfellas Movie',
},
{
label: 'Untouchables',
icon: 'pi pi-video',
data: 'Untouchables Movie',
},
],
},
],
},
];
const fileStrictFilter: TreeNode[] = [
{
label: 'Documents',
data: 'Documents Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'Work',
data: 'Work Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'Expenses.doc',
icon: 'pi pi-file',
data: 'Expenses Document',
},
{
label: 'Resume.doc',
icon: 'pi pi-file',
data: 'Resume Document',
},
],
},
{
label: 'Home',
data: 'Home Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'Invoices.txt',
icon: 'pi pi-file',
data: 'Invoices for this month',
},
],
},
],
},
{
label: 'Pictures',
data: 'Pictures Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'barcelona.jpg',
icon: 'pi pi-image',
data: 'Barcelona Photo',
},
{
label: 'logo.jpg',
icon: 'pi pi-image',
data: 'PrimeFaces Logo',
},
{
label: 'primeui.png',
icon: 'pi pi-image',
data: 'PrimeUI Logo',
},
],
},
{
label: 'Movies',
data: 'Movies Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'Al Pacino',
data: 'Pacino Movies',
children: [
{
label: 'Scarface',
icon: 'pi pi-video',
data: 'Scarface Movie',
},
{
label: 'Serpico',
icon: 'pi pi-video',
data: 'Serpico Movie',
},
],
},
{
label: 'Robert De Niro',
data: 'De Niro Movies',
children: [
{
label: 'Goodfellas',
icon: 'pi pi-video',
data: 'Goodfellas Movie',
},
{
label: 'Untouchables',
icon: 'pi pi-video',
data: 'Untouchables Movie',
},
],
},
],
},
];
const fileRegularScroll: TreeNode[] = [
{
label: 'Documents',
data: 'Documents Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'Work',
data: 'Work Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'Expenses.doc',
icon: 'pi pi-file',
data: 'Expenses Document',
},
{
label: 'Resume.doc',
icon: 'pi pi-file',
data: 'Resume Document',
},
],
},
{
label: 'Home',
data: 'Home Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'Invoices.txt',
icon: 'pi pi-file',
data: 'Invoices for this month',
},
],
},
],
},
{
label: 'Pictures',
data: 'Pictures Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'barcelona.jpg',
icon: 'pi pi-image',
data: 'Barcelona Photo',
},
{
label: 'logo.jpg',
icon: 'pi pi-image',
data: 'PrimeFaces Logo',
},
{
label: 'primeui.png',
icon: 'pi pi-image',
data: 'PrimeUI Logo',
},
],
},
{
label: 'Movies',
data: 'Movies Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'Al Pacino',
data: 'Pacino Movies',
children: [
{
label: 'Scarface',
icon: 'pi pi-video',
data: 'Scarface Movie',
},
{
label: 'Serpico',
icon: 'pi pi-video',
data: 'Serpico Movie',
},
],
},
{
label: 'Robert De Niro',
data: 'De Niro Movies',
children: [
{
label: 'Goodfellas',
icon: 'pi pi-video',
data: 'Goodfellas Movie',
},
{
label: 'Untouchables',
icon: 'pi pi-video',
data: 'Untouchables Movie',
},
],
},
],
},
];
const fileFlexibleViewport: TreeNode[] = [
{
label: 'Documents',
data: 'Documents Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'Work',
data: 'Work Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'Expenses.doc',
icon: 'pi pi-file',
data: 'Expenses Document',
},
{
label: 'Resume.doc',
icon: 'pi pi-file',
data: 'Resume Document',
},
],
},
{
label: 'Home',
data: 'Home Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'Invoices.txt',
icon: 'pi pi-file',
data: 'Invoices for this month',
},
],
},
],
},
{
label: 'Pictures',
data: 'Pictures Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'barcelona.jpg',
icon: 'pi pi-image',
data: 'Barcelona Photo',
},
{
label: 'logo.jpg',
icon: 'pi pi-image',
data: 'PrimeFaces Logo',
},
{
label: 'primeui.png',
icon: 'pi pi-image',
data: 'PrimeUI Logo',
},
],
},
{
label: 'Movies',
data: 'Movies Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'Al Pacino',
data: 'Pacino Movies',
children: [
{
label: 'Scarface',
icon: 'pi pi-video',
data: 'Scarface Movie',
},
{
label: 'Serpico',
icon: 'pi pi-video',
data: 'Serpico Movie',
},
],
},
{
label: 'Robert De Niro',
data: 'De Niro Movies',
children: [
{
label: 'Goodfellas',
icon: 'pi pi-video',
data: 'Goodfellas Movie',
},
{
label: 'Untouchables',
icon: 'pi pi-video',
data: 'Untouchables Movie',
},
],
},
],
},
];
const fileVirtualScroll: TreeNode[] = [
{
label: 'Lazy Node 0',
data: 'Node 0',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
leaf: false
},
{
label: 'Lazy Node 1',
data: 'Node 1',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
leaf: false
},
{
label: 'Lazy Node 1',
data: 'Node 2',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
leaf: false
}
];
const fileHorizontal: TreeNode[] = [
{
label: 'Root',
data: 'Root Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'Documents',
data: 'Documents Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'Work',
data: 'Work Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{ label: 'Expenses.doc', icon: 'pi pi-file', data: 'Expenses Document' },
{
label: 'Resume.doc',
icon: 'pi pi-file',
data: 'Resume Document',
},
],
},
{
label: 'Home',
data: 'Home Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [{ label: 'Invoices.txt', icon: 'pi pi-file', data: 'Invoices for this month' }],
},
],
},
{
label: 'Pictures',
data: 'Pictures Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{ label: 'barcelona.jpg', icon: 'pi pi-image', data: 'Barcelona Photo' },
{ label: 'logo.jpg', icon: 'pi pi-image', data: 'PrimeFaces Logo' },
{ label: 'primeui.png', icon: 'pi pi-image', data: 'PrimeUI Logo' },
],
},
{
label: 'Movies',
data: 'Movies Folder',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
children: [
{
label: 'Al Pacino',
data: 'Pacino Movies',
children: [
{ label: 'Scarface', icon: 'pi pi-video', data: 'Scarface Movie' },
{
label: 'Serpico',
icon: 'pi pi-video',
data: 'Serpico Movie',
},
],
},
{
label: 'Robert De Niro',
data: 'De Niro Movies',
children: [
{ label: 'Goodfellas', icon: 'pi pi-video', data: 'Goodfellas Movie' },
{
label: 'Untouchables',
icon: 'pi pi-video',
data: 'Untouchables Movie',
},
],
},
],
},
],
},
];
const fileLazy: TreeNode[] = [
{
label: 'Lazy Node 0',
data: 'Node 0',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
leaf: false,
},
{
label: 'Lazy Node 1',
data: 'Node 1',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
leaf: false,
},
{
label: 'Lazy Node 1',
data: 'Node 2',
expandedIcon: 'pi pi-folder-open',
collapsedIcon: 'pi pi-folder',
leaf: false,
},
];Встройте компонент с помощью тэга p-tree.
Basic
Lazy
Programmatic
Templating
node.label ** node.label **
Single Selection
Multiple Selection with Metakey
Multiple Selection with Checkbox
Lenient Filter Mode
Strict Filter Mode
Regular Scroll
Flexible Viewport
Virtual Scroll
Horizontal
Свойства
| Name | Type | Default | Description |
|---|---|---|---|
| value | array | null | An array of treenodes. |
| selectionMode | string | null | Defines the selection mode, valid values "single", "multiple", and "checkbox". |
| selection | any | null | A single treenode instance or an array to refer to the selections. |
| style | string | null | Inline style of the component. |
| styleClass | string | null | Style class of the component. |
| contextMenu | ContextMenu | null | Context menu instance. |
| layout | string | vertical | Defines the orientation of the tree, valid values are 'vertical' and 'horizontal'. |
| draggableScope | string/array | null | Scope of the draggable nodes to match a droppableScope. |
| droppableScope | string/array | null | Scope of the droppable nodes to match a draggableScope. |
| draggableNodes | boolean | false | Whether the nodes are draggable. |
| droppableNodes | boolean | false | Whether the nodes are droppable. |
| metaKeySelection | boolean | true | Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically. |
| propagateSelectionUp | boolean | true | Whether checkbox selections propagate to ancestor nodes. |
| propagateSelectionDown | boolean | true | Whether checkbox selections propagate to descendant nodes. |
| loading | boolean | false | Displays a loader to indicate data load is in progress. |
| loadingIcon | string | pi pi-spinner | The icon to show while indicating data load is in progress. |
| emptyMessage | string | No records found | Text to display when there is no data. |
| ariaLabel | string | Used to define a string that labels the tree. | |
| ariaLabelledBy | string | pi pi-spinner | Establishes relationships between the component and label(s) where its value should be one or more element IDs. |
| togglerAriaLabel | string | Defines a string that labels the toggler icon for accessibility. | |
| validateDrop | boolean | false | When enabled, drop can be accepted or rejected based on condition defined at onNodeDrop. |
| filter | boolean | false | When specified, displays an input field to filter the items. |
| filterBy | string | label | When filtering is enabled, filterBy decides which field or fields (comma separated) to search against. |
| filterMode | string | lenient | Mode for filtering valid values are "lenient" and "strict". Default is lenient. |
| filterPlaceholder | string | null | Placeholder text to show when filter input is empty. |
| filterLocale | string | undefined | Locale to use in filtering. The default locale is the host environment's current locale. |
| scrollHeight | string | null | Height of the scrollable viewport. |
| virtualScroll | boolean | false | Whether the data should be rendered on demand during scroll. |
| virtualNodeHeight | number | null | Height of a node to use in calculations of virtual scrolling. |
| minBufferPx | number | null | Minimum amount of content buffer (in pixels) that the viewport must render. |
| maxBufferPx | number | null | Configures how much buffer space to render back up to when it detects that more buffer is required. |
| trackBy | Function | null | Function to optimize the node list rendering, default algoritm checks for object identity. |
| indentation | number | 1.5 | Indentation factor for spacing of the nested node when virtual scrolling is enabled. |
События
| Name | Parameters | Description |
|---|---|---|
| onNodeSelect | event.originalEvent: browser event<br>event.node: Selected node instance. | Callback to invoke when a node is selected. |
| onNodeUnselect | event.originalEvent: browser event<br>event.node: Unselected node instance. | Callback to invoke when a node is unselected. |
| onNodeExpand | event.originalEvent: browser event<br>event.node: Expanded node instance. | Callback to invoke when a node is expanded. |
| onNodeCollapse | event.originalEvent: browser event<br>event.node: Collapsed node instance. | Callback to invoke when a node is collapsed. |
| onNodeContextMenuSelect | event.originalEvent: browser event<br>event.node: Selected node instance. | Callback to invoke when a node is selected with right click. |
| onNodeDrop | event.originalEvent: browser event<br>event.dragNode: Dragged node instance<br>event.dropNode: Dropped node instance. event.index: Index of the dropped node within siblings. | Callback to invoke when a node is dropped. |
| onFilter | event.filter: Filter value used in filtering.<br>event.filteredValue: Filtered data after running the filtering. | Callback to invoke when data is filtered. |
Методы
| Name | Parameters | Description |
|---|---|---|
| resetFilter | - | Resets filtering. |
| _filter | value: string | Applies filter by given value. |
Шаблоны
| Name | Parameters |
|---|---|
| header | - |
| empty | - |
| footer | - |
Стилизация
| Name | Element |
|---|---|
| p-tree | Main container element |
| p-tree-horizontal | Main container element in horizontal mode |
| p-tree-container | Container of nodes |
| p-treenode | A treenode element |
| p-treenode-content | Content of a treenode |
| p-treenode-toggler | Toggle icon |
| p-treenode-icon | Icon of a treenode |
| p-treenode-label | Label of a treenode |
| p-treenode-children | Container element for node children |