--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

PrimeNG之TreeTable的更多相关文章

  1. 原创jquery插件treeTable（转）

    由于工作需要,要直观的看到某个业务是由那些子业务引起的异常,所以我需要用树表的方式来展现各个层次的数据. 需求: 1.数据层次分明: 2.数据读取慢.需要动态加载孩子节点: 3.支持默认展开多少层. ...

  2. jquery插件treetable使用

    下载后treetable插件后只需要保留jquery.treetable.css样式文件,jquery.treetable.theme.default.css皮肤文件和jquery.treetable ...

  3. jQuery treetable【表格多重折叠树功能及拖放表格子元素重新排列】

    今天有个表格需求做到多重折叠子元素功能,仔细想了下实现原理, 1.在html中,把父子节点的关系写在自定义属性,但对于节点是否有孩子(hasChild),是否是最后一个节点(isLastOne),是否 ...

  4. treetable 前台 累计计算树值 提交后台

    treetable   累计计算树值 效果图 html  代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...

  5. 支持IE6的树形节结构TreeTable实际应用案例

    <script src="jquery.js" type="text/javascript"></script> <script ...

  6. 支持IE6的树形节结构TreeTable

    关于TreeTable实际应用的案例:http://www.cnblogs.com/qigege/p/5213689.html treeTable是跨浏览器.性能很高的jquery的树表组件,它使用非 ...

  7. 遍历json创建树状表（首先的前提条件是要引入jquery的jquery treeTable插件）

    "root":{ "children":[ { "name":"AA", "children":[ ...

  8. jquery treeTable插件使用细则

    简介 treeTable是跨浏览器.性能很高的jquery的树表组件,它使用非常简单,只需要引用jquery库和一个js文件,接口也很简单. 优点 兼容主流浏览器: 支持IE6和IE6+, Firef ...

  9. Spring Boot 入门（六）：集成 treetable 和 zTree 实现树形图

    本篇文章是接着Spring Boot 入门(五):集成 AOP 进行日志管理写的,主要集成了树形图,在部门列表或者权限列表中,树形图经常被用上.主要是根据相应的 API 凭借 html 字符串 1.t ...

随机推荐

  1. 【转】浅谈常用的几种web攻击方式

    浅谈常用的几种web攻击方式 一.Dos攻击(Denial of Service attack) 是一种针对服务器的能够让服务器呈现静止状态的攻击方式.有时候也加服务停止攻击或拒绝服务攻击.其原理就是 ...

  2. NodeJs之fs

    NodeJs版本:4.4.4 fs的实用方法 查看文件信息(fs.stat) 定义:fs.stat(path, callback) var fs = require('fs'); fs.stat('t ...

  3. SNF软件开发机器人2018最新更新内容

    SNF软件开发机器人从10月份到现在的更新升级情况如下: 1 表单 表单控件占多列时,宽度默认0,自适应宽度2 excel导出 部分excel导出方法移动到框架中,可通用获取3 生成代码 生成的代码, ...

  4. SNF快速开发平台2019-APP移动端实际应用效果

    废话不多说,直接上效果图: 这是我们移动端框架基本程序+组件库+标准业务程序,当然了还需要配合上我们的代码生成器则更如虎添翼.https://www.cnblogs.com/spring_wang/p ...

  5. 初尝 nginx

    第一次尝试用 nginx,记录下几个简单命令: // 启动 start nginx // 测试并设置配置文件 nginx -t -c conf\nginx.conf // 修改配置文件后重载 ngin ...

  6. 和李洪强一起学设计01 PS第一天

    和李洪强一起学设计01 PS第一天

  7. git clone 后误删除了分离出来的文件怎么恢复？

    git clone 后,会分离出项目的文件. 误删除了,可以使用以下命令恢复: #先检查一下git状态 git status #通过如下命令重新分离出文件 git checkout -f HEAD

  8. 必读：Spark与kafka010整合

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/rlnLo2pNEfx9c/article/details/79648890 SparkStreami ...

  9. Web重温系列（二）：SQLite+EF6实现本地化存储

    本来我们的产品有着复杂的层次结构,作为客户端的C# WinForm是不操作数据库的.但是最近有个需求,需要将数据本地保存.可选的方案很多,比如文本文件或者XML序列化和反序列化,或者如access.d ...

  10. CentOS安装和配置Apache(httpd)

    1. 安装httpd yum install httpd #安装apache 2. 启动httpd systemctl start httpd.service #启动apache 3. 随服务器自启动 ...