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="width: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="width:100%;border-width: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="width:100%;border-width: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="width:100%;border-width: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