极客教程Angular PrimeNG TreeTable事件
Angular PrimeNG是一个开源的框架，有丰富的原生Angular UI组件，用来做很好的造型，这个框架用来做响应式的网站非常容易。它提供了大量的模板、组件、主题设计、广泛的图标库等等。在这篇文章中，我们将看到Angular PrimeNG TreeTable事件。
TreeTable是用来以表格的形式显示分层数据的。Events有助于了解正在发生的行动，我们可以对其进行检查，也可以相应地显示相关的更新。
Angular PrimeNG TreeTable事件：
- onNodeExpand(event) :它是当一个节点被展开时调用的回调。
- onNodeCollapse(event) 。它是当一个节点被折叠时调用的回调。
- onPage(event) 。它是当分页发生时调用的回调。
- onSort(event)。这是一个回调，当一列被排序时调用。
- onFilter(event) :它是数据被过滤时调用的回调。
- onLazyLoad(event)。它是当分页、排序或过滤在懒惰模式下发生时调用的回调。
- onColResize(event)。这是一个回调，当一个列被调整大小时调用。
- onColReorder(event) :它是当一个列被重新排序时调用的回调。
- onNodeSelect(event)。它是当一个节点被选中时调用的回调。
- onNodeUnselect(event)。它是当一个节点被取消选择时调用的回调。
- onContextMenuSelect(event) :这是一个回调，当一个节点被右键单击选中时，它将被调用。
- onHeaderCheckboxToggle(event)。这是一个回调，当页眉复选框的状态改变时调用。
- onEditInit(event)。它是当一个单元格切换到编辑模式时要调用的回调。
- onEditComplete(event)。这是单元格编辑完成时调用的回调。
- onEditCancel(event)。这是一个回调，当单元格编辑被转义键取消时调用。
语法:
<p-treeTable
[value]="tableData"
(event-name)="...">
</p-treeTable>
创建Angular应用程序和模块安装。
第1步 。使用以下命令创建一个Angular应用程序。
ng new geeks_angular
第2步 。在创建你的项目文件夹（即geeks_angular）后，使用以下命令移动到它。
cd geeks_angular
第3步 。在你给定的目录中安装PrimeNG。
npm install primeng --save
npm install primeicons --save
项目结构。项目结构将看起来像以下。
Project Structure
实例1 。在下面的例子中，我们有一个简单的Tree，显示了Angular PrimeNG中关闭TreeNode时的祝酒词。
<h1 style="color: green; text-align:center;">
GeeksforGeeks
</h1>
<h3>Angular PrimeNG TreeTable Events</h3>
<p-treeTable [columns]="cols"
[value]="tableData"
selectionMode="single"
(onNodeCollapse)="handleClick($event)">
<ng-template pTemplate="header">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</ng-template>
<ng-template pTemplate="body"
let-rowNode let-rowData="rowData"
let-columns="columns">
<tr>
<td>
<p-treeTableToggler [rowNode]="rowNode">
</p-treeTableToggler>
{{ rowData.name }}
</td>
<td>{{ rowData.age }}</td>
<td>{{ rowData.type }}</td>
</tr>
</ng-template>
</p-treeTable>
<p-toast position="top-left"></p-toast>
import { Component } from '@angular/core';
import { TreeNode } from 'primeng/api';
import { MessageService } from 'primeng/api';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
providers: [MessageService],
})
export class AppComponent {
tableData: TreeNode[] = [];
cols: any[] = [];
constructor(private messageService: MessageService) { }
ngOnInit() {
this.cols = [
{ field: 'name', header: 'First Name' },
{ field: 'age', header: 'Age' },
];
this.tableData = [
{
data: {
name: 'A',
age: '40',
},
children: [
{
data: {
name: 'B',
age: '16',
},
},
{
data: {
name: 'C',
age: '14',
},
},
],
},
{
data: {
name: 'D',
age: '55',
},
children: [
{
data: {
name: 'E',
age: '20',
},
},
{
data: {
name: 'F',
age: '24',
},
},
],
},
{
data: {
name: 'G',
age: '32',
},
children: [
{
data: {
name: 'H',
age: '20',
},
},
{
data: {
name: 'I',
age: '24',
},
},
],
},
{
data: {
name: 'J',
age: '64',
},
children: [
{
data: {
name: 'K',
age: '20',
},
},
{
data: {
name: 'L',
age: '24',
},
},
],
},
{
data: {
name: 'M',
age: '12',
},
children: [
{
data: {
name: 'N',
age: '20',
},
},
{
data: {
name: 'O',
age: '24',
},
},
],
},
{
data: {
name: 'P',
age: '34',
},
children: [
{
data: {
name: 'Q',
age: '20',
},
},
{
data: {
name: 'R',
age: '24',
},
},
],
},
{
data: {
name: 'S',
age: '43',
},
children: [
{
data: {
name: 'T',
age: '20',
},
},
{
data: {
name: 'U',
age: '24',
},
},
],
},
];
}
handleClick(event: any) {
this.messageService.add({
severity: 'warn',
summary: 'Node Collapsed',
detail: 'Welcome to GeeksforGeeks',
});
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule }
from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TreeTableModule } from 'primeng/treetable';
import { ToastModule } from 'primeng/toast';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
TreeTableModule,
FormsModule,
ToastModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
输出:
例子2：在下面的例子中，当TreeTable在Angular PrimeNG中被排序时，TreeTable会显示一个警告。
<h1 style="color: green; text-align:center;">
GeeksforGeeks
</h1>
<h3>Angular PrimeNG TreeTable Events</h3>
<p-treeTable [value]="tableData"
[columns]="cols"
(onSort)="handleClick($event)">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns"
[ttSortableColumn]="col.field">
{{ col.header }}
<p-treeTableSortIcon [field]="col.field">
</p-treeTableSortIcon>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body"
let-rowNode let-rowData="rowData"
let-columns="columns">
<tr>
<td *ngFor="let col of columns; let i = index">
<p-treeTableToggler [rowNode]="rowNode"
*ngIf="i == 0">
</p-treeTableToggler>
{{ rowData[col.field] }}
</td>
</tr>
</ng-template>
</p-treeTable>
<p-toast position="top-left"></p-toast>
import { Component } from '@angular/core';
import { TreeNode } from 'primeng/api';
import { MessageService } from 'primeng/api';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
providers: [MessageService],
})
export class AppComponent {
tableData: TreeNode[] = [];
cols: any[] = [];
constructor(private messageService: MessageService) { }
ngOnInit() {
this.cols = [
{ field: 'name', header: 'First Name' },
{ field: 'age', header: 'Age' },
];
this.tableData = [
{
data: {
name: 'A',
age: '40',
},
children: [
{
data: {
name: 'B',
age: '16',
},
},
{
data: {
name: 'C',
age: '14',
},
},
],
},
{
data: {
name: 'D',
age: '55',
},
children: [
{
data: {
name: 'E',
age: '20',
},
},
{
data: {
name: 'F',
age: '24',
},
},
],
},
{
data: {
name: 'G',
age: '32',
},
children: [
{
data: {
name: 'H',
age: '20',
},
},
{
data: {
name: 'I',
age: '24',
},
},
],
},
{
data: {
name: 'J',
age: '64',
},
children: [
{
data: {
name: 'K',
age: '20',
},
},
{
data: {
name: 'L',
age: '24',
},
},
],
},
{
data: {
name: 'M',
age: '12',
},
children: [
{
data: {
name: 'N',
age: '20',
},
},
{
data: {
name: 'O',
age: '24',
},
},
],
},
{
data: {
name: 'P',
age: '34',
},
children: [
{
data: {
name: 'Q',
age: '20',
},
},
{
data: {
name: 'R',
age: '24',
},
},
],
},
{
data: {
name: 'S',
age: '43',
},
children: [
{
data: {
name: 'T',
age: '20',
},
},
{
data: {
name: 'U',
age: '24',
},
},
],
},
];
}
handleClick(event: any) {
this.messageService.add({
severity: 'success',
summary: 'Sorted Column',
detail: 'Welcome to GeeksforGeeks',
});
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule }
from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { NodeService } from './nodeservice';
import { TreeTableModule } from 'primeng/treetable';
import { ToastModule } from 'primeng/toast';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
TreeTableModule,
FormsModule,
ToastModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [NodeService],
})
export class AppModule { }
输出:
