Angular PrimeNG表格模板

Angular PrimeNG是一个开源的框架，有丰富的原生Angular UI组件，用来做很好的造型，这个框架用来做响应式的网站非常容易。它提供了大量的模板、组件、主题设计、广泛的图标库等等。在这篇文章中，我们将学习Angular PrimeNG表格模板。

表是用来以表格格式显示数据的。表中的模板提供了自定义功能。它们提供了对表展示的完全控制，表处理排序、过滤、分页等。这在不牺牲灵活性的情况下加快了开发速度。

Angular PrimeNG表格模板：

caption : 它是表格的标题。
header :它是表的标题。
headergrouped : 它是thead元素的内容。
body : 它是tbody的内容。
footer : 它是tfoot元素的内容。
footergrouped : 它是tfoot元素的内容。
summary : 这是显示在表格下面的摘要部分。
rowexpansion : 它是一个扩展行的内容。
frozenbody : 它是冻结侧的tbody元素的内容。
frozenrowexpansion : 它是冻结侧的扩展行的内容。
groupheader :它是被分组的行的标题。
groupfooter : 它是分组行的页脚。
emptymessage : 它是在没有值显示时要显示的内容。
paginatorleft : 它是分页器左边部分的自定义内容。
paginatorright : 它是分页器右边部分的自定义内容。

语法：表的标题模板。

<ng-template pTemplate="caption">
  <div class="table-header">
    List of Tutorials
  </div>
</ng-template>

创建Angular应用程序和模块安装。

第1步：使用以下命令创建一个Angular应用程序。

ng new geeks_angular

第2步：在创建你的项目文件夹即geeks_angular之后，使用以下命令移动到它。

cd geeks_angular

第3步 。在你给定的目录中安装PrimeNG。

npm install primeng --save
npm install primeicons --save

项目结构：安装成功后，将显示以下项目结构。

Angular PrimeNG表格模板

例子1：在下面的例子中，我们有一个标题和Angular PrimeNG中的表的标题。

app.component.html:

<h1 style="color:green;
           text-align:center;">
    GeeksforGeeks
</h1>
<h3>Angular PrimeNG Table Templates</h3>
<h5>Basic</h5>
  
<p-table #dt [value]="tutorials" 
             dataKey="title" 
             [rowHover]="true" 
             [showCurrentPageReport]="true" 
             [filterDelay]="0" 
             [globalFilterFields]="['title', 'category', 'rating']">
    <ng-template pTemplate="caption">
        <div class="table-header">
            List of Tutorials
        </div>
    </ng-template>
    <ng-template pTemplate="header">
        <tr>
            <th style="width: 3rem"></th>
            <th pSortableColumn="title">
                Title
                <p-sortIcon field="title"></p-sortIcon>
            </th>
            <th pSortableColumn="category">
                Category
                <p-sortIcon field="category"></p-sortIcon>
            </th>
            <th pSortableColumn="rating">
                Rating
                <p-sortIcon field="rating"></p-sortIcon>
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-tutorial>
        <tr class="p-selectable-row">
            <td>
                <p-tableCheckbox [value]="tutorial"> </p-tableCheckbox>
            </td>
            <td>
                <span class="p-column-title"> Title </span>
                {{ tutorial.title }}
            </td>
            <td>
                <span class="p-column-title"> Category </span>
                <span class="image-text">
                    {{ tutorial.category }}
                </span>
            </td>
            <td>
                <span class="p-column-title"> Rating </span>
                <span class="image-text">
                    {{ tutorial.rating }}
                </span>
            </td>
        </tr>
    </ng-template>
</p-table>

app.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { Table } from 'primeng/table';
import { PrimeNGConfig } from 'primeng/api';
import { MessageService } from 'primeng/api';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: [
        `
  :host ::ng-deep .p-cell-editing {
      padding-top: 0 !important;
      padding-bottom: 0 !important;
  }
`,
    ],
})
export class AppComponent {
    tutorials: Tutorial[];
    @ViewChild('dt') table: Table;
    clonedTutorials: { [s: string]: Tutorial } = {};
    constructor(private primengConfig: PrimeNGConfig) { }
  
    ngOnInit() {
        this.tutorials = [
            {
                title: 'Queue',
                category: 'Data Structure',
                rating: 8,
            },
            {
                title: 'Circularly LinkedList',
                category: 'Data Structure',
                rating: 1,
            },
            {
                title: 'Doubly LinkedList',
                category: 'Data Structure',
                rating: 3,
            },
            {
                title: 'Singly LinkedList',
                category: 'Data Structure',
                rating: 5,
            },
            {
                title: 'Doubly Ended Queue',
                category: 'Data Structure',
                rating: 10,
            },
            {
                title: 'Binary Search Tree',
                category: 'Data Structure',
                rating: 2,
            },
            {
                title: 'Red Black Tree',
                category: 'Data Structure',
                rating: 9,
            },
            {
                title: 'Breadth First Search',
                category: 'Graph',
                rating: 6,
            },
            {
                title: "Floyd's Cycle",
                category: 'Algorithm',
                rating: 7,
            },
            {
                title: 'Travelling Salesman Problem',
                category: 'Algorithm',
                rating: 4,
            },
            {
                title: 'Bellman Ford',
                category: 'Graph',
                rating: 8,
            },
            {
                title: 'KMP Algorithm',
                category: 'String',
                rating: 10,
            },
        ];
  
        this.primengConfig.ripple = true;
    }
}
export interface Tutorial {
    title?: string;
    category?: string;
    rating?: number;
}

app.module.ts

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 { MultiSelectModule } from 'primeng/multiselect';
import { ButtonModule } from 'primeng/button';
import { TableModule } from 'primeng/table';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TableModule,
        MultiSelectModule,
        ButtonModule,
        FormsModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

输出:

Angular PrimeNG表格模板

例子2：在下面的例子中，我们在Angular PrimeNG中的表格底部有一个摘要。

app.component.html

<h1 style="color:green;
           text-align:center;">
    GeeksforGeeks
</h1>
<h3>Angular PrimeNG Table Templates</h3>
<h5>Basic</h5>
  
<p-table #dt [value]="tutorials" 
             dataKey="title" 
             [rowHover]="true" 
             [showCurrentPageReport]="true" 
             [filterDelay]="0" 
             [globalFilterFields]="['title', 'category', 'rating']">
    <ng-template pTemplate="caption">
        <div class="table-header">List of Tutorials</div>
    </ng-template>
    <ng-template pTemplate="header">
        <tr>
            <th style="width: 3rem"></th>
            <th pSortableColumn="title">
                Title
                <p-sortIcon field="title"></p-sortIcon>
            </th>
            <th pSortableColumn="category">
                Category
                <p-sortIcon field="category"></p-sortIcon>
            </th>
            <th pSortableColumn="rating">
                Rating
                <p-sortIcon field="rating"></p-sortIcon>
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-tutorial>
        <tr class="p-selectable-row">
            <td>
                <p-tableCheckbox [value]="tutorial"></p-tableCheckbox>
            </td>
            <td>
                <span class="p-column-title"> Title </span>
                {{ tutorial.title }}
            </td>
            <td>
                <span class="p-column-title"> Category </span>
                <span class="image-text">
                    {{ tutorial.category }}
                </span>
            </td>
            <td>
                <span class="p-column-title"> Rating </span>
                <span class="image-text">
                    {{ tutorial.rating }}
                </span>
            </td>
        </tr>
    </ng-template>
    <ng-template pTemplate="summary">
        <div class="table-summary">
            There are {{ tutorials.length }} tutorials
        </div>
    </ng-template>
</p-table>

app.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { Table } from 'primeng/table';
import { PrimeNGConfig } from 'primeng/api';
import { MessageService } from 'primeng/api';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: [
        `
  :host ::ng-deep .p-cell-editing {
      padding-top: 0 !important;
      padding-bottom: 0 !important;
  }
`,
    ],
})
export class AppComponent {
    tutorials: Tutorial[];
    @ViewChild('dt') table: Table;
    clonedTutorials: { [s: string]: Tutorial } = {};
    constructor(private primengConfig: PrimeNGConfig) { }
  
    ngOnInit() {
        this.tutorials = [
            {
                title: 'Queue',
                category: 'Data Structure',
                rating: 8,
            },
            {
                title: 'Circularly LinkedList',
                category: 'Data Structure',
                rating: 1,
            },
            {
                title: 'Doubly LinkedList',
                category: 'Data Structure',
                rating: 3,
            },
            {
                title: 'Singly LinkedList',
                category: 'Data Structure',
                rating: 5,
            },
            {
                title: 'Doubly Ended Queue',
                category: 'Data Structure',
                rating: 10,
            },
            {
                title: 'Binary Search Tree',
                category: 'Data Structure',
                rating: 2,
            },
            {
                title: 'Red Black Tree',
                category: 'Data Structure',
                rating: 9,
            },
            {
                title: 'Breadth First Search',
                category: 'Graph',
                rating: 6,
            },
            {
                title: "Floyd's Cycle",
                category: 'Algorithm',
                rating: 7,
            },
            {
                title: 'Travelling Salesman Problem',
                category: 'Algorithm',
                rating: 4,
            },
            {
                title: 'Bellman Ford',
                category: 'Graph',
                rating: 8,
            },
            {
                title: 'KMP Algorithm',
                category: 'String',
                rating: 10,
            },
        ];
  
        this.primengConfig.ripple = true;
    }
}
export interface Tutorial {
    title?: string;
    category?: string;
    rating?: number;
}

app.module.ts

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 { MultiSelectModule } from 'primeng/multiselect';
import { ButtonModule } from 'primeng/button';
import { TableModule } from 'primeng/table';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TableModule,
        MultiSelectModule,
        ButtonModule,
        FormsModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }