PrimeNG之TreeTable

--treetable用于显示分层数据表格的格式

 Import

import {TreeTableModule,TreeNode,SharedModule} from 'primeng/primeng';

Getting Started

treetable组件需要TreeNode对象数组的值。让我们开始与树节点的API。

Name	Type	Default	Description
label	string	null	Label of the node.
data	any	null	Data represented by the node.
icon	string	null	Icon of the node to display next to content. Not used by TreeTable.
expandedIcon	string	null	Icon to use in expanded state. Not used by TreeTable.
collapsedIcon	string	null	Icon to use in collapsed state. Not used by TreeTable.
children	TreeNode[]	null	An array of treenodes as children.
leaf	boolean	null	Specifies if the node has children. Used in lazy loading.
style	string	null	Inline style of the node.
styleClass	string	null	Style class of the node.

一般情况，节点将从服务端获取，下面是一个例子nodeservice获取的数据从一个JSON文件。

@Injectable()
export class NodeService {
    
    constructor(private http: Http) {}

    getFilesystem() {
        return this.http.get('showcase/resources/data/filesystem.json')
                    .toPromise()
                    .then(res => <TreeNode[]> res.json().data);
    }
}

filesystem.json文件是模拟样本数据。在实际应用中，这应该是从远程调用产生的动态响应。

@Injectable()
export class NodeService {
    
    constructor(private http: Http) {}

    getFilesystem() {
        return this.http.get('showcase/resources/data/filesystem.json')
                    .toPromise()
                    .then(res => <TreeNode[]> res.json().data);
    }
}

The filesystem.json file consists of sample data. In a real application, this should be a dynamic response generated from the remote call.


{
    "data":
    [  
        {  
            "data":{  
                "name":"Documents",
                "size":"75kb",
                "type":"Folder"
            },
            "children":[
                {  
                    "data":{  
                        "name":"Work",
                        "size":"55kb",
                        "type":"Folder"
                    },
                    "children":[  
                        {  
                            "data":{  
                                "name":"Expenses.doc",
                                "size":"30kb",
                                "type":"Document"
                            }
                        },
                        {  
                            "data":{  
                                "name":"Resume.doc",
                                "size":"25kb",
                                "type":"Resume"
                            }
                        }
                    ]
                },
                {  
                    "data":{  
                        "name":"Home",
                        "size":"20kb",
                        "type":"Folder"
                    },
                    "children":[  
                        {  
                            "data":{  
                                "name":"Invoices",
                                "size":"20kb",
                                "type":"Text"
                            }
                        }
                    ]
                }
            ]
        },
        {  
            "data":{  
                "name":"Pictures",
                "size":"150kb",
                "type":"Folder"
            },
            "children":[  
                {  
                    "data":{  
                        "name":"barcelona.jpg",
                        "size":"90kb",
                        "type":"Picture"
                    }
                },
                {  
                    "data":{  
                        "name":"primeui.png",
                        "size":"30kb",
                        "type":"Picture"
                    }
                },
                {  
                    "data":{  
                        "name":"optimus.jpg",
                        "size":"30kb",
                        "type":"Picture"
                    }
                }
            ]
        }
    ]
}

使用此服务的组件调用getfiles()和分配他们到文件属性绑定到树。

export class TreeTableDemoComponent implements OnInit {
    
    files: TreeNode[];

    constructor(private nodeService: NodeService) {}
    
    ngOnInit() {
        this.nodeService.getFileSystem().then(files => this.files = files);
    }

}

<p-treeTable [value]="files">
    <p-column field="name" header="Name"></p-column>
    <p-column field="size" header="Size"></p-column>
    <p-column field="type" header="Type"></p-column>
</p-treeTable>

列组件

利用以下列treetable组件定义选项。

属性

Name	Type	Default	Description
field	string	null	Property of a row data.
header	string	null	Header text of a column.
footer	string	null	Footer text of a column.
style	string	null	Inline style of the column.
styleClass	string	null	Style class of the column.

<p-column field="vin" header="Vin"></p-column>

动态列

列可以被实例化使用数组以及ngfor迭代。

export class TreeTableDemoComponent implements OnInit {

    files: TreeNode[];

    constructor(private nodeService: NodeService) {}
    
    ngOnInit() {
        this.nodeService.getFileSystem().then(files => this.files = files);

        this.cols = [
                {field: 'name', header: 'Name'},
                {field: 'size', header: 'Size'},
                {field: 'type', header: 'Type'}
            ];
        }
    }
}

<p-treeTable [value]="cars">
    <p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header"></p-column>
</p-treeTable>

Facets

页眉和页脚是可以显示自定义内容的两个部分。

import {Header} from 'primeng/primeng';
import {Footer} from 'primeng/primeng';

<p-treeTable [value]="files">
    <p-header>List of Files</p-header>
    <p-footer>Choose from the list.</p-footer>
    <p-column field="name" header="Name"></p-column>
    <p-column field="size" header="Size"></p-column>
    <p-column field="type" header="Type"></p-column>
</p-treeTable>

选择

treetable支持三的选择方法，single, multiple and checkbox。选择是通过设置SelectionMode属性设置为和提供一个单一的树或treenodes参考的选择根据选择模式阵列启用。

export class TreeTableDemoComponent implements OnInit {
    
    files: TreeNode[];
    
    selectedFile: TreeNode;

    constructor(private nodeService: NodeService) {}
    
    ngOnInit() {
        this.nodeService.getFiles().then(files => this.files = files);
    }

}

<p-treeTable [value]="files" selectionMode="single" [(selection)]="selectedFile"></p-treeTable>

在多模式或复选框模式中，选择属性应为数组。在多模式项目可以选择使用元键或切换单独依靠metakeyselection属性值是真正的默认值。触摸功能的设备metakeyselection自动关闭。

    export class TreeTableDemoComponent implements OnInit {
        
        files: TreeNode[];
        
        selectedFiles: TreeNode[];

        constructor(private nodeService: NodeService) {}
        
        ngOnInit() {
            this.nodeService.getFiles().then(files => this.files = files);
        }

    }

<p-treeTable [value]="files" selectionMode="single" [(selection)]="selectedFiles"></p-treeTable>

onnodeselect和onnodeunselect treetable提供选项，选择特征回调。

export class TreeTableDemoComponent implements OnInit {
    
    files: TreeNode[];
    
    selectedFiles: TreeNode[];

    constructor(private nodeService: NodeService) {}
    
    ngOnInit() {
        this.nodeService.getFiles().then(files => this.files = files);
    }
    
    nodeSelect(event) {
        //event.node = selected node
    }

}

通过将节点的可选属性设置为false，可以禁用特定节点的选择。

ContextMenu（上下文菜单）

treetable与ContextMenu独家整合。为了附上菜单一treetable，定义一个局部变量菜单模板并将其绑定到该treetable的ContextMenu属性。右键单击行的时候会使菜单展示。

<p-treeTable [value]="files" selectionMode="single" [(selection)]="selectedFile" [contextMenu]="cm">
    <p-header>Context Menu</p-header>
    <p-column field="name" header="Name"></p-column>
    <p-column field="size" header="Size"></p-column>
    <p-column field="type" header="Type"></p-column>
</p-treeTable>

<p-contextMenu #cm [model]="items"></p-contextMenu>

export class TreeTableDemoComponent implements OnInit {
    
    files: TreeNode[];
    
    selectedFile: TreeNode;

    constructor(private nodeService: NodeService) {}
    
    ngOnInit() {
        this.nodeService.getFiles().then(files => this.files = files);
        
        this.items = [
            {label: 'View', icon: 'fa-search', command: (event) => this.viewNode(this.selectedFile2)},
            {label: 'Delete', icon: 'fa-close', command: (event) => this.deleteNode(this.selectedFile2)}
        ];
    }
    
    viewNode(node: TreeNode) {
        this.msgs = [];
        this.msgs.push({severity: 'info', summary: 'Node Selected', detail: node.data.name});
    }

    deleteNode(node: TreeNode) {
        node.parent.children = node.parent.children.filter( n => n.data !== node.data);
        this.msgs = [];
        this.msgs.push({severity: 'info', summary: 'Node Deleted', detail: node.data.name});
    }

}

Templating（模板）


在TreeNode默认标签是一个树节点内的显示，如果你需要自定义内容定义ng模板列的列作为一个隐变量和rowData作为节点实例里面。类似地，自定义内容可以放在列的页眉和页脚上，模板。下面的示例将输入字段来创建可编辑的treenodes。

<h3>ng-template</h3>
<p-treeTable [value]="files">
    <p:column>
        <ng-template let-col let-node="rowData" pTemplate="header">
            <button type="button" pButton label="Refresh"></button>
        </ng-template>
        <ng-template let-col let-node="rowData" pTemplate="body">
            <input [(ngModel)]="node.data.name" type="text" style="100%">
        </ng-template>
    </p:column>
</p-treeTable>

 Lazy Loading（懒加载）

处理大型数据集的懒惰加载很方便。而不是加载整个树，节点可以在onnodeexpand事件加载。实现懒惰加载的重要部分是将节点的叶子属性定义为false，这将指示树显示箭头图标，以指示该节点是否有子节点，但尚未加载。当懒惰的节点展开，onnodeexpand调用远程调用可以增加孩子扩展节点。

<p-treeTable [value]="files" (onNodeExpand)="loadNode($event)"></p-treeTable>

export class TreeTableDemoComponent implements OnInit {
    
    files: TreeNode[];
    
    selectedFiles: TreeNode[];

    constructor(private nodeService: NodeService) {}
    
    ngOnInit() {
        //initial nodes
        this.nodeService.getFiles().then(files => this.files = files);
    }
    
    loadNode(event) {
        if(event.node) {
            //in a real application, make a call to a remote url to load children of the current node and add the new nodes as children
            this.nodeService.getLazyFilesystem().then(nodes => event.node.children = nodes);
        }
    }

}

假设在ngoninit treetable与数据像下面，节点没有实际的孩子但叶属性设置为false的节点初始化。

{
    "data":
    [  
        {  
            "data":{  
                "name":"Lazy Folder 0",
                "size":"75kb",
                "type":"Folder"
            },
            "leaf": false
        },
        {  
            "data":{  
                "name":"Lazy Folder 1",
                "size":"150kb",
                "type":"Folder"
            },
            "leaf": false
        }
    ]
}

Attributes

Name	Type	Default	Description
value	array	null	An array of treenodes.
labelExpand	string	Expand	Tooltip and screenreader text for expand icon.
labelCollapse	string	Collapse	Tooltip and screenreader text for collapse icon.
selectionMode	string	null	Defines the selection mode, valid values "single" and "multiple".
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.
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.

Events

Name	Parameters	Description
onNodeSelect	event.originalEvent: browser event event.node: Selected node instance.	Callback to invoke when a node is selected.
onNodeUnselect	event.originalEvent: browser event event.node: Unselected node instance.	Callback to invoke when a node is unselected.
onNodeExpand	event.originalEvent: browser event event.node: Expanded node instance.	Callback to invoke when a node is expanded.
onNodeCollapse	event.originalEvent: browser event event.node: Collapsed node instance.	Callback to invoke when a node is collapsed.
onContextMenuSelect	event.originalEvent: browser event event.node: Selected node instance.	Callback to invoke when a node is selected with right click.

Styling（样式）

以下是结构式的类列表，对于主题类主题页面访问。

Name	Element
ui-treetable	Main container element
ui-treetable-header	Header element
ui-treetable-tablewrapper	Container of table
ui-treetable-footer	Footer element

demo code

<p-growl [value]="msgs"></p-growl>

<p-treeTable [value]="files1">
    <p-header>Basic</p-header>
    <p-column field="name" header="Name"></p-column>
    <p-column field="size" header="Size"></p-column>
    <p-column field="type" header="Type"></p-column>
</p-treeTable>
    
<p-treeTable [value]="files2" selectionMode="single" [(selection)]="selectedFile"
    (onNodeSelect)="nodeSelect($event)" (onNodeUnselect)="nodeUnselect($event)" [style]="{'margin-top':'50px'}">
    <p-header>Singe Selection</p-header>
    <p-column field="name" header="Name"></p-column>
    <p-column field="size" header="Size"></p-column>
    <p-column field="type" header="Type"></p-column>
</p-treeTable>
<p>Selected Node: {{selectedFile ? selectedFile.data.name : 'none'}}</p>
    
<p-treeTable [value]="files3" selectionMode="multiple" [(selection)]="selectedFiles" 
    (onNodeSelect)="nodeSelect($event)" (onNodeUnselect)="nodeUnselect($event)" [style]="{'margin-top':'50px'}">
    <p-header>Multiple Selection</p-header>
    <p-column field="name" header="Name"></p-column>
    <p-column field="size" header="Size"></p-column>
    <p-column field="type" header="Type"></p-column>
</p-treeTable>
<p>Selected Nodes: <span *ngFor="let file of selectedFiles">{{file.data.name}} </span></p>

<p-treeTable [value]="files4" selectionMode="checkbox" [(selection)]="selectedFiles2" [style]="{'margin-top':'50px'}">
    <p-header>Checkbox Selection</p-header>
    <p-column field="name" header="Name"></p-column>
    <p-column field="size" header="Size"></p-column>
    <p-column field="type" header="Type"></p-column>
</p-treeTable>
<p>Selected Nodes: <span *ngFor="let file of selectedFiles2">{{file.data.name}} </span></p>

<p-treeTable [value]="files5" [style]="{'margin-top':'50px'}">
    <p-header>Editable Cells with Templating</p-header>
    <p-column field="name" header="Name">
        <ng-template let-node="rowData" pTemplate="body">
            <input type="text" [(ngModel)]="node.data.name" style="100%;border-0px 0px 1px 0px">
        </ng-template>
    </p-column>
    <p-column field="size" header="Size">
        <ng-template let-node="rowData" pTemplate="body">
            <input type="text" [(ngModel)]="node.data.size" style="100%;border-0px 0px 1px 0px">
        </ng-template>
    </p-column>
    <p-column field="type" header="Type">
        <ng-template let-node="rowData" pTemplate="body">
            <input type="text" [(ngModel)]="node.data.type" style="100%;border-0px 0px 1px 0px">
        </ng-template>
    </p-column>
</p-treeTable>

<p-treeTable [value]="files6" selectionMode="single" [(selection)]="selectedFile2" [style]="{'margin-top':'50px'}" [contextMenu]="cm">
    <p-header>Context Menu</p-header>
    <p-column field="name" header="Name"></p-column>
    <p-column field="size" header="Size"></p-column>
    <p-column field="type" header="Type"></p-column>
</p-treeTable>

<p-treeTable [value]="lazyFiles" [style]="{'margin-top':'50px'}"
    (onNodeExpand)="nodeExpand($event)">
    <p-header>Lazy Loading</p-header>
    <p-column field="name" header="Name"></p-column>
    <p-column field="size" header="Size"></p-column>
    <p-column field="type" header="Type"></p-column>
</p-treeTable>

export class TreeTableDemo implements OnInit {
    
    msgs: Message[];
    
    files1: TreeNode[];
    
    files2: TreeNode[];
    
    files3: TreeNode[];
    
    files4: TreeNode[];
    
    lazyFiles: TreeNode[];
        
    selectedFile: TreeNode;
    
    selectedFile2: TreeNode;
    
    selectedFiles: TreeNode[];
        
    constructor(private nodeService: NodeService) { }

    ngOnInit() {
        this.nodeService.getFilesystem().then(files => this.files = files);
        this.nodeService.getLazyFilesystem().then(files => this.lazyFiles = files);
        
        this.items = [
            {label: 'View', icon: 'fa-search', command: (event) => this.viewNode(this.selectedFile2)},
            {label: 'Delete', icon: 'fa-close', command: (event) => this.deleteNode(this.selectedFile2)}
        ];
    }
    
    nodeSelect(event) {
        this.msgs = [];
        this.msgs.push({severity: 'info', summary: 'Node Selected', detail: event.node.data.name});
    }
    
    nodeUnselect(event) {
        this.msgs = [];
        this.msgs.push({severity: 'info', summary: 'Node Unselected', detail: event.node.data.name});
    }
    
    nodeExpand(event) {
        if(event.node) {
            //in a real application, make a call to a remote url to load children of the current node and add the new nodes as children
            this.nodeService.getLazyFilesystem().then(nodes => event.node.children = nodes);
        }
    }
    
    viewNode(node: TreeNode) {
        this.msgs = [];
        this.msgs.push({severity: 'info', summary: 'Node Selected', detail: node.data.name});
    }

    deleteNode(node: TreeNode) {
        node.parent.children = node.parent.children.filter( n => n.data !== node.data);
        this.msgs = [];
        this.msgs.push({severity: 'info', summary: 'Node Deleted', detail: node.data.name});
    ~
    
}

参考资料：

https://www.primefaces.org/primeng/#/treetable