极客教程Angular PrimeNG TreeTable属性
Angular PrimeNG是一个开源的框架，有丰富的原生Angular UI组件，用来做很好的造型，这个框架用来做响应式的网站非常容易。它提供了大量的模板、组件、主题设计、广泛的图标库等等。在这篇文章中，我们将看到Angular PrimeNG TreeTable Properties.。
TreeTable是用来以表格的形式显示分层数据的。TreeTable的属性用于根据需要修改TreeTable，并且可以访问TreeTable的每一个部分。我们可以使用属性来修改TreeTable的用户界面。
Angular PrimeNG TreeTable属性：
- value(array)。用于设置要显示的TreeTable的数据。
- columns(array)。它是一个代表动态列的对象数组。
- style(string)。它是TreeTable的风格设计。
- styleClass(string)。它是组件的风格类。
- tableStyle(string)。它是表格的内联样式。
- tableStyleClass(string)。它是表格的风格类。
- autoLayout(boolean)。它用于设置单元格的宽度是否根据内容来调整。默认值为false。
- lazy(boolean)。它定义了数据是否以懒惰的方式被加载和交互。默认值为false。
- lazyLoadOnInit(boolean)。它用于设置是否在初始化时调用懒惰加载。默认值为false。
- paginator(boolean)。它用于指定何时启用分页功能。默认值是false。
- rows(number)。它用于设置每页显示的行数。
- first(number)。用于设置要显示的第一行的索引。
- totalRecords(number)。它是总记录的数量，当没有定义时，默认为值的长度。
- pageLinkes(number)。它是要在分页器中显示的页面链接的数量。
- rowsPerPageOptions(array):它用于设置整数/对象值的数组，以便在分页器的每页行数下拉菜单中显示。
- alwaysShowPaginator(boolean)。用来设置是否在只有一个页面的情况下也要显示它。默认值为true。
- showFirstLastIcon(boolean)。如果设置为 “true”，在分页器上会显示图标，以进入第一页和最后一页。默认值被设置为 “true”。
- paginatorPosition(string)。它用于设置位置。对于分页器的位置，选项是_top _ , _bottom _ 或 _both _ 。
- paginatorDropdownAppendTo(any):它是连接分页器下拉覆盖的目标元素。
- currentPageReportTemplate(string)。它是当前页面报告元素的模板。
- showCurrentPageReport(boolean)。它用于设置是否显示当前页报告。默认值为false。
- showJumpToPageDropdown(boolean)。它用于设置是否显示一个下拉菜单以导航到任何页面。默认值是false。
- showPageLinks(boolean)。它用于设置是否显示页面链接。默认值为true。
- defaultSortOrder(number)。它用于设置当未排序的列被用户交互排序时要使用的排序顺序。默认值是1。
- sortMode(string)。它定义了排序是在单列还是多列上工作。默认值是单列。
- resetPageOnSort(boolean)。如果设置为true，在排序后将分页器重置到第一页。默认值是true。
- customSort(boolean)。如果设置为true，使用自定义的sortFunction。默认值是false。
- sortField(string)。它用于设置默认排序数据的字段名。
- sortOrder(number)。它用于设置默认排序启用时的排序顺序。默认值为1。
- multiSortMeta(array) :它是一个SortMeta对象的数组，默认在多重排序模式下对数据进行排序。
- sortFunction(function)。它是一个事件发射器，用于在自定义排序时调用，详情请参考排序部分。
- filters(array)。它是一个FilterMetadata对象的数组，用于提供外部过滤器。
- filterDelay(number)。用来设置过滤数据前的延迟，单位是毫秒。默认值是300毫秒。
- globalFilterFields(array)。它是一个字段的数组，作为字符串用于全局过滤。
- filterMode(string)。它是过滤有效值的模式，即 “宽松 “和 “严格”。默认是宽松的。
- filterLocale(string)。它用于设置过滤时使用的语言环境。
- selectionMode(string)。它用于设置选择模式。
- selection(any)。在单一模式下是选定的行，在多种模式下是一个数组的值。
- contextMenuSelection(any)。它是带有上下文菜单的选定行。
- dataKey（字符串）。它是唯一标识数据中的记录的属性。
- metaKeySelection(boolean)。它定义了元键是否应该被考虑用于选择。默认值是true。
- rowHover(boolean) :它在不需要selectionMode的情况下为行添加悬停效果。默认值是false。
- loading(boolean)。它显示一个加载器，表示数据加载正在进行中。默认值为false。
- loadingIcon(string)。它用于设置加载器的图标。
- showLoader(boolean)。它用于设置当加载属性为真时是否显示加载掩码。默认值是true。
- scrollable(boolean)。它用于设置水平和/或垂直滚动。默认值为false。
- scrollHeight(string)。它是滚动视口的高度，以固定的像素为单位，或者用 “flex “关键字表示动态尺寸。
- virtualScroll(boolean)。它用于设置在滚动过程中是否应该按需加载数据。默认值是false。
- virtualScrollItemSize(number) :它是在计算虚拟滚动时要使用的行的高度。默认值是28。
- virtualScrollOptions(ScrollerOptions)。它用于设置是否使用滚动器功能。
- frozenWidth(string)。它是冻结列容器的宽度。
- frozenColumns(array)。它是一个对象数组，代表被冻结的动态列。
- resizableColumns(boolean)。它是当启用时，列可以使用拖放来调整大小。默认值是false。
- columnResizeMode(string)。它定义了在调整列的大小时整个表格的宽度是否应该改变，有效值是适合和扩展。默认值是适合。
- reorderableColumns(boolean)。它是当启用时，列可以使用拖放来重新排序。默认值为false。
- contextMenu(ContextMenu)。它是ContextMenu的本地ng-template变量。
- rowTrackBy(Function)。它是通过委托给ngForTrackBy来优化dom操作的函数。
语法：使用任何属性，如下所示。
<p-treeTable
[value]="tableData"
[resizableColumns]="true"
</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：在下面的例子中，我们有一个启用了行悬浮的TreeTable。
app.component.html
<h1 style="color: green; text-align:center;">
GeeksforGeeks
</h1>
<h3>Angular PrimeNG TreeTable Properties</h3>
<p-treeTable [columns]="cols"
[value]="tableData" [rowHover]="true">
<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>
</tr>
</ng-template>
</p-treeTable>
app.component.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { NodeService } from './nodeservice';
import { TreeNode } from 'primeng/api';
import { TreeTable } from 'primeng/treetable';
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',
},
},
],
},
];
}
}
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from
'@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { NodeService } from './nodeservice';
import { TreeTableModule } from 'primeng/treetable';
import { ButtonModule } from 'primeng/button';
import { InputTextModule } from 'primeng/inputtext';
import { ToastModule } from 'primeng/toast';
import { RippleModule } from 'primeng/ripple';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
TreeTableModule,
ButtonModule,
InputTextModule,
HttpClientModule,
FormsModule,
ToastModule,
RippleModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [NodeService],
})
export class AppModule { }
输出:
实例2：在下面的例子中，我们已经启用了加载器。因此，它显示了一个加载器图标。
app.component.html
<h1 style="color: green; text-align:center;">
GeeksforGeeks
</h1>
<h3>Angular PrimeNG TreeTable Properties</h3>
<p-treeTable [columns]="cols"
[value]="tableData" [loading]="true">
<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>
</tr>
</ng-template>
</p-treeTable>
app.component.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { NodeService } from './nodeservice';
import { TreeNode } from 'primeng/api';
import { TreeTable } from 'primeng/treetable';
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',
},
},
],
},
];
}
}
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from
'@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { NodeService } from './nodeservice';
import { TreeTableModule } from 'primeng/treetable';
import { ButtonModule } from 'primeng/button';
import { InputTextModule } from 'primeng/inputtext';
import { ToastModule } from 'primeng/toast';
import { RippleModule } from 'primeng/ripple';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
TreeTableModule,
ButtonModule,
InputTextModule,
HttpClientModule,
FormsModule,
ToastModule,
RippleModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [NodeService],
})
export class AppModule { }
输出:
