Tree(树)

树用来展现层级数据

使用说明

1.import

import {Tree} from 'primeng/primeng'; 
import {TreeNode} from 'primeng/primeng';

2. Getting Started

Tree 组件需要TreeNode的对象数组作为它的值，让我们先看看TreeNode的api

Name Type Default Description
label string null 节点的标签
data any null 节点代表的数据
icon string null 节点内容旁边的图标
expandedIcon string null 图标使用处于打开状态
collapsedIcon string null 图标使用处于关闭状态
children TreeNode[] null 子节点
leaf boolean null 如果该节点有子节点，使用lazy loading
style string null 节点的行内样式
styleClass string null 节点的样式类

大多情况下，获取远程数据来取得节点数据，下面是从json获取数据

@Injectable() export class NodeService { 
    constructor(private http: Http) {} 
    getFiles() { 
        return this.http.get('showcase/resources/data/files.json')
        .toPromise() 
        .then(res => <TreeNode[]> res.json().data) 
        .then(data => { return data; });
    } 
}

files.json

{ "data": [ { "label": "Documents", "data": "Documents Folder", "expandedIcon": "fa-folder-open", "collapsedIcon": "fa-folder", "children": [{ "label": "Work", "data": "Work Folder", "expandedIcon": "fa-folder-open", "collapsedIcon": "fa-folder", "children": [{"label": "Expenses.doc", "icon": "fa-file-word-o", "data": "Expenses Document"}, {"label": "Resume.doc", "icon": "fa-file-word-o", "data": "Resume Document"}] }, { "label": "Home", "data": "Home Folder", "expandedIcon": "fa-folder-open", "collapsedIcon": "fa-folder", "children": [{"label": "Invoices.txt", "icon": "fa-file-word-o", "data": "Invoices for this month"}] }] }, { "label": "Pictures", "data": "Pictures Folder", "expandedIcon": "fa-folder-open", "collapsedIcon": "fa-folder", "children": [ {"label": "barcelona.jpg", "icon": "fa-file-image-o", "data": "Barcelona Photo"}, {"label": "logo.jpg", "icon": "fa-file-image-o", "data": "PrimeFaces Logo"}, {"label": "primeui.png", "icon": "fa-file-image-o", "data": "PrimeUI Logo"}] }, { "label": "Movies", "data": "Movies Folder", "expandedIcon": "fa-folder-open", "collapsedIcon": "fa-folder", "children": [{ "label": "Al Pacino", "data": "Pacino Movies", "children": [{"label": "Scarface", "icon": "fa-file-video-o", "data": "Scarface Movie"}, {"label": "Serpico", "icon": "fa-file-video-o", "data": "Serpico Movie"}] }, { "label": "Robert De Niro", "data": "De Niro Movies", "children": [{"label": "Goodfellas", "icon": "fa-file-video-o", "data": "Goodfellas Movie"}, {"label": "Untouchables", "icon": "fa-file-video-o", "data": "Untouchables Movie"}] }] } ] }

export class TreeDemoComponent implements OnInit { 
    files: TreeNode[]; 
    constructor(private nodeService: NodeService) {} 
    ngOnInit() { 
        this.nodeService.getFiles().then(files => this.files =     files); 
    } 
}

<p-tree [value]="files"></p-tree>

results matching ""

    No results matching ""