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
PrimeNG之TreeTable的更多相关文章
- 原创jquery插件treeTable（转）
由于工作需要,要直观的看到某个业务是由那些子业务引起的异常,所以我需要用树表的方式来展现各个层次的数据. 需求: 1.数据层次分明: 2.数据读取慢.需要动态加载孩子节点: 3.支持默认展开多少层. ...
- jquery插件treetable使用
下载后treetable插件后只需要保留jquery.treetable.css样式文件,jquery.treetable.theme.default.css皮肤文件和jquery.treetable ...
- jQuery treetable【表格多重折叠树功能及拖放表格子元素重新排列】
今天有个表格需求做到多重折叠子元素功能,仔细想了下实现原理, 1.在html中,把父子节点的关系写在自定义属性,但对于节点是否有孩子(hasChild),是否是最后一个节点(isLastOne),是否 ...
- treetable 前台 累计计算树值 提交后台
treetable 累计计算树值 效果图 html 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...
- 支持IE6的树形节结构TreeTable实际应用案例
<script src="jquery.js" type="text/javascript"></script> <script ...
- 支持IE6的树形节结构TreeTable
关于TreeTable实际应用的案例:http://www.cnblogs.com/qigege/p/5213689.html treeTable是跨浏览器.性能很高的jquery的树表组件,它使用非 ...
- 遍历json创建树状表（首先的前提条件是要引入jquery的jquery treeTable插件）
"root":{ "children":[ { "name":"AA", "children":[ ...
- jquery treeTable插件使用细则
简介 treeTable是跨浏览器.性能很高的jquery的树表组件,它使用非常简单,只需要引用jquery库和一个js文件,接口也很简单. 优点 兼容主流浏览器: 支持IE6和IE6+, Firef ...
- Spring Boot 入门（六）：集成 treetable 和 zTree 实现树形图
本篇文章是接着Spring Boot 入门(五):集成 AOP 进行日志管理写的,主要集成了树形图,在部门列表或者权限列表中,树形图经常被用上.主要是根据相应的 API 凭借 html 字符串 1.t ...
随机推荐
- mina websocket 粘包、断包、（丢包）解决心得
被这3个(其实是2个)问题坑惨了,目前没发现存在丢包问题,之前认为的丢包问题事实是不存在的. 粘包和断包的情况是存在的,这两个问题不怕,只要发送接收到的数据包顺序没有被打乱颠倒,一切都好办. 容易掉的 ...
- Introducing Apache Spark Datasets（中英双语）
文章标题 Introducing Apache Spark Datasets 作者介绍 Michael Armbrust, Wenchen Fan, Reynold Xin and Matei Zah ...
- 环境的配置； host 配置地址
1.环境的配置: C:\Windows\System32\drivers\etc 2.如果没有下载host 切记复制etc的文件,在c盘桌面打开,更改后替换 3.可下载host 和fiddle 4.多 ...
- C语言 · 8皇后问题
题目:8皇后问题 在8×8的棋盘上,放置8个皇后(棋子),使两两之间互不攻击.所谓互不攻击是说任何两个皇后都要满足: (1)不在棋盘的同一行: (2)不在棋盘的同一列: (3)不在棋盘的同一对角线上. ...
- Sword libcurl回调函数相关知识
libcurl响应回调函数说明 libcurl在默认情况下,回调里面会将数据分段的返回,不会一下子将发送端的数据全部塞到回调函数里面, 经过源码分析回调函数和curl_easy_perform是在 ...
- 关于.NET编译的目标平台(AnyCPU,x86,x64) (转)
关于.NET编译的目标平台(AnyCPU,x86,x64)(转) 今天有项目的代码收到客户的反馈,要求所有的EXE工程的目标平台全部指定成x86,而所有DLL工程的目标平台全部指定成AnyCPU . ...
- Smart Link
Smart Link通过两个接口相互配合工作来实现功能.这样的一对接口组成了一个Smart Link组.为了区别一个Smart Link组中的两个接口,我们将其中的一个叫做主接口,另一个叫做从接口.同 ...
- springboot 工程启动报错之Consider defining a bean of type ‘XXX’ in your configuration.
一.前言: 使用springboot自动注入的方式搭建好了工程,结果启动的时候报错了!!!,错误如下图: Description: Field userEntityMapper in com.xxx. ...
- iOS 定时器 NSTimer、CADisplayLink、GCD3种方式的实现
在软件开发过程中,我们常常需要在某个时间后执行某个方法,或者是按照某个周期一直执行某个方法.在这个时候,我们就需要用到定时器. 然而,在iOS中有很多方法完成以上的任务,到底有多少种方法呢?经过查阅资 ...
- python从FTP下载文件
#!/usr/bin/python # -*- coding: utf-8 -*- """ FTP常用操作 """ from ftplib ...