Расширяемые строки таблицы Angular PrimeNG
Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. Он предоставляет множество шаблонов, компонентов, дизайн тем, обширную библиотеку иконок и многое другое. В этой статье мы увидим расширяемые строки таблицы Angular PrimeNG.
Расширяемые строки в таблице используются для отображения некоторых дополнительных сведений о каждой записи, поскольку размещение всех значений в столбцах не всегда является хорошим отображением и представлением приложения. Вместо этого мы можем каждую запись индивидуально с большим количеством данных. Следующие директивы могут использоваться для расширяемых строк таблицы, которые описаны ниже:
- pRowToggler : это директива, значением которой является экземпляр данных строки для элемента по вашему выбору, событие щелчка которого переключает расширение.
- pRowTogglerDisabled : установка значения true отключает событие переключения для элемента.
Синтаксис :
<ng-template pTemplate="rowexpansion"
let-rowData let-columns="columns">
<tr>
<td [attr.colspan]="columns.length + 1">
<div class="grid p-fluid">
<div class="col-12 md-9">
<div class="grid">
<div class="col-12">
<b>Title:</b>
{{ rowData.title }}
</div>
<div class="col-12">
<b>Category:</b>
{{ rowData.category }}
</div>
<div class="col-12">
<b>Rating:</b>
{{ rowData.rating }}
</div>
</div>
</div>
</div>
</td>
</tr>
</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
Структура проекта: Структура проекта будет выглядеть следующим образом:
Пример 1. Этот пример иллюстрирует базовое использование расширяемых строк таблицы в Angular PrimeNG, где у нас есть таблица с фильтрами.
- app.component.html
HTML
<h1 style="color:green; text-align:center;"> GeeksforGeeks</h1><h3> Angular PrimeNG Table Expandable Rows</h3> <p-table [columns]="cols" [value]="tutorials" dataKey="vin"> <ng-template pTemplate="header" let-columns> <tr> <th style="width: 2.25em"></th> <th *ngFor="let col of columns"> {{ col.header }} </th> </tr> </ng-template> <ng-template pTemplate="body" let-rowData let-expanded="expanded" let-columns="columns"> <tr> <td> <a href="#" [pRowToggler]="rowData"> <i [ngClass]="expanded ? "pi pi-fw pi-chevron-circle-down" : "pi pi-fw pi-chevron-circle-right""></i> </a> </td> <td *ngFor="let col of columns"> {{ rowData[col.field] }} </td> </tr> </ng-template> <ng-template pTemplate="rowexpansion" let-rowData let-columns="columns"> <tr> <td [attr.colspan]="columns.length + 1"> <div class="grid p-fluid" style="font-size:16px; padding:20px"> <div class="col-12 md-9"> <div class="grid"> <div class="col-12"> <b>Title:</b> {{ rowData.title }} </div> <div class="col-12"> <b>Category:</b> {{ rowData.category }} </div> <div class="col-12"> <b>Rating:</b> {{ rowData.rating }} </div> </div> </div> </div> </td> </tr> </ng-template></p-table> |
- app.component.ts
Javascript
import { Component } from "@angular/core";import { SelectItem, FilterService, FilterMatchMode } from "primeng/api"; @Component({ selector: "app-root", templateUrl: "./app.component.html",})export class AppComponent { cols: any[]; tutorials: Tutorial[]; matchModeOptions: SelectItem[]; constructor(private filterService: FilterService) { } 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.cols = [ { field: "title", header: "Title" }, { field: "category", header: "Category" }, { field: "rating", header: "Rating" }, ]; this.matchModeOptions = [ { label: "Starts With", value: FilterMatchMode.STARTS_WITH }, { label: "Contains", value: FilterMatchMode.CONTAINS }, { label: "Ends With", value: FilterMatchMode.ENDS_WITH }, { label: "Equals", value: FilterMatchMode.EQUALS }, ]; }} export interface Tutorial { title?: string; category?: string; rating?: number;} |
- app.module.ts
Javascript
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 { } |
Выход:
Пример 2. В следующем примере переключение отключено с помощью pRowTogglerDisabled как true .
- app.component.html
HTML
<h1 style="color:green; text-align:center;"> GeeksforGeeks</h1><h3> Angular PrimeNG Table Expandable Rows</h3> <p-table [columns]="cols" [value]="tutorials" dataKey="vin" [responsive]="true"> <ng-template pTemplate="header" let-columns> <tr> <th style="width: 2.25em"></th> <th *ngFor="let col of columns"> {{ col.header }} </th> </tr> </ng-template> <ng-template pTemplate="body" let-rowData let-expanded="expanded" let-columns="columns"> <tr> <td> <a href="#" [pRowToggler]="rowData" [pRowTogglerDisabled]="true"> <i [ngClass]="expanded ? "pi pi-fw pi-chevron-circle-down" : "pi pi-fw pi-chevron-circle-right""> </i> </a> </td> <td *ngFor="let col of columns"> {{ rowData[col.field] }} </td> </tr> </ng-template> <ng-template pTemplate="rowexpansion" let-rowData let-columns="columns"> <tr> <td [attr.colspan]="columns.length + 1"> <div class="grid p-fluid" style="font-size:16px; padding:20px"> <div class="col-12 md-9"> <div class=
|