极客教程Angular PrimeNG表冻结行数
Angular PrimeNG是一个开源的库，由原生的Angular UI组件组成，用来做伟大的造型，这个框架用来做响应式网站，非常容易。在这篇文章中，我们将看到Angular PrimeNG表冻结行。
表组件以表格的形式向用户显示一些数据。冻结的行是在滚动时被固定在表格中的行。被冻结的行可以通过[frozenValue]属性来定义。
语法:
<p-table [value]="unfrozenBooks"
[frozenValue]="frozenBooks"
[scrollable]="true" scrollHeight="300px">
<ng-template pTemplate="header">
<tr>
<th>Name</th>
<th>Author</th>
...
</tr>
</ng-template>
<ng-template pTemplate=" **frozenbody** " let-book>
<tr class="frozen-row">
<td>{{book.name}}</td>
<td>{{book.author}}</td>
...
</tr>
</ng-template>
<ng-template pTemplate=" **body** " let-book>
<tr>
<td>{{book.name}}</td>
<td>{{book.author}}</td>
...
</tr>
</ng-template>
</p-table>
创建Angular应用程序并安装模块：
第1步：使用以下命令创建一个Angular应用程序。
ng new myapp
第2步：创建你的项目文件夹即myapp后，使用以下命令移动到它。
cd myapp
第3步在你给定的目录中安装PrimeNG。
npm install primeng --save
npm install primeicons --save
项目结构：完成上述步骤后，项目结构将如下所示。
Project Structure
实例1：本实例说明了如何在PrimenNG中冻结一个表的行。
<div style="text-align: center">
<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Table Frozen Rows</h4>
<p-table
[value]="unfrozenBooks"
[frozenValue]="frozenBooks"
[scrollable]="true"
scrollHeight="300px">
<ng-template pTemplate="header">
<tr>
<th>Name</th>
<th>Author</th>
<th>Year</th>
</tr>
</ng-template>
<ng-template pTemplate="frozenbody" let-book>
<tr class="frozen-row">
<td>{{book.name}}</td>
<td>{{book.author}}</td>
<td>{{book.year}}</td>
</tr>
</ng-template>
<ng-template pTemplate="body" let-book>
<tr>
<td>{{book.name}}</td>
<td>{{book.author}}</td>
<td>{{book.year}}</td>
</tr>
</ng-template>
</p-table>
</div>
import { Component } from '@angular/core';
interface Book {
name: String,
author: String,
year: Number
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styles: [
`.frozen-row{
font-weight: bold;
}`
]
})
export class AppComponent {
frozenBooks: Book[] = [];
unfrozenBooks: Book[] = [];
ngOnInit() {
this.unfrozenBooks = [
{
name: "Clean Code",
author: "Robert Cecil Martin",
year: 2008
},
{
name: "Refactoring",
author: "Martin Fowler",
year: 1999
},
{
name: "Code Complete",
author: "Steve McConnell",
year: 1993
},
{
name: "Programming Pearls",
author: "John Bentley",
year: 1986
},
{
name: "The Clean Coder",
author: "Robert Cecil Martin",
year: 2011
},
{
name: "Coders at Work",
author: "Peter Seibel",
year: 2009
},
{
name: "Effective Java",
author: "Joshua Bloch",
year: 2001
},
{
name: "Head First Java",
author: "Bert Bates",
year: 2003
}
];
this.frozenBooks = [
{
name: "Introduction to Algorithms",
author: "Thomas H Corman",
year: 1989
}
];
}
}
import { NgModule } from '@angular/core';
import { BrowserModule }
from '@angular/platform-browser';
import { BrowserAnimationsModule }
from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TableModule } from 'primeng/table';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
TableModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
运行应用程序：
从你的项目根部执行下面的命令来运行angular应用程序。
ng serve --open
输出:
例子2：在这个例子中，我们在每一行的末尾添加了一个按钮，这样它的冻结状态就可以动态地切换。
<div style="text-align: center">
<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Table Frozen Rows</h4>
<p-table
[value]="unfrozenBooks"
[frozenValue]="frozenBooks"
[scrollable]="true"
scrollHeight="300px">
<ng-template pTemplate="header">
<tr>
<th>Name</th>
<th>Author</th>
<th>Year</th>
<th>Freeze/Unfreeze</th>
</tr>
</ng-template>
<ng-template
pTemplate="frozenbody"
let-book let-index="rowIndex">
<tr class="frozen-row">
<td>{{book.name}}</td>
<td>{{book.author}}</td>
<td>{{book.year}}</td>
<td>
<button pButton type="button"
[icon]="'pi pi-lock-open'"
(click)="toggleFreeze(book,true,index)"
class="p-button p-button-text">
</button>
</td>
</tr>
</ng-template>
<ng-template
pTemplate="body"
let-book let-index="rowIndex">
<tr>
<td>{{book.name}}</td>
<td>{{book.author}}</td>
<td>{{book.year}}</td>
<td>
<button pButton type="button"
[icon]="'pi pi-lock'"
[disabled]="frozenBooks.length >= 2"
(click)="toggleFreeze(book,false,index)"
class="p-button p-button-text">
</button>
</td>
</tr>
</ng-template>
</p-table>
</div>
import { Component } from '@angular/core';
interface Book {
name: String,
author: String,
year: Number
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styles: [
`.frozen-row{
font-weight: bold;
}`
]
})
export class AppComponent {
frozenBooks: Book[] = [];
unfrozenBooks: Book[] = [];
ngOnInit() {
this.unfrozenBooks = [
{
name: "Clean Code",
author: "Robert Cecil Martin",
year: 2008
},
{
name: "Refactoring",
author: "Martin Fowler",
year: 1999
},
{
name: "Code Complete",
author: "Steve McConnell",
year: 1993
},
{
name: "Programming Pearls",
author: "John Bentley",
year: 1986
},
{
name: "The Clean Coder",
author: "Robert Cecil Martin",
year: 2011
},
{
name: "Coders at Work",
author: "Peter Seibel",
year: 2009
},
{
name: "Effective Java",
author: "Joshua Bloch",
year: 2001
},
{
name: "Head First Java",
author: "Bert Bates",
year: 2003
}
];
this.frozenBooks = [
{
name: "Introduction to Algorithms",
author: "Thomas H Corman",
year: 1989
}
];
}
toggleFreeze(book: Book, isFreezed: boolean, i: Number)
{
if (isFreezed) {
this.frozenBooks =
this.frozenBooks.filter((c, index) => index !== i);
this.unfrozenBooks.push(book);
}
else {
this.unfrozenBooks =
this.unfrozenBooks.filter((c, index) => index !== i);
this.frozenBooks.push(book);
}
}
}
import { NgModule } from '@angular/core';
import { BrowserModule }
from '@angular/platform-browser';
import { BrowserAnimationsModule }
from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TableModule } from 'primeng/table';
import { ButtonModule } from 'primeng/button';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
TableModule,
ButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
输出:
