So erstellen Sie in der Angular-Tabelle veränderbare Spalten: Eine Schritt-für-Schritt-Anleitung
Winkelmaterialtabellen bieten eine elegante Möglichkeit, Daten anzuzeigen. Benutzer wünschen sich jedoch häufig zusätzliche Funktionen wie die Möglichkeit, die Größe von Tabellenspalten zu ändern, um die Datenanzeige besser steuern zu können. In dieser Anleitung gehen wir durch den Prozess der Erstellung skalierbarer Spalten in einer Angular-Tabelle mithilfe einer benutzerdefinierten Direktive. Sie erfahren Schritt für Schritt, wie Sie die Direktive einrichten, die Größenänderung formatieren und die Größenänderung von Spalten implementieren.
Einführung
Das Hinzufügen veränderbarer Spalten zu einer Angular Material-Tabelle erfordert das Erstellen einer benutzerdefinierten Anweisung, die auf Mausereignisse lauscht und es Benutzern ermöglicht, auf eine Spalte zu klicken und sie zu ziehen, um deren Breite anzupassen. Dies gibt Benutzern Flexibilität, insbesondere beim Umgang mit großen Datensätzen, und verbessert das Benutzererlebnis.
In diesem Tutorial werden wir:
- Erstellen Sie eine benutzerdefinierte Anweisung zur Spaltengröße.
- Mausereignisse verarbeiten, um die Größe von Spalten zu ändern.
- Wenden Sie Stile für ein reibungsloses Benutzererlebnis an.
- Hängen Sie die Anweisung an eine Winkelmaterialtabelle an.
Lassen Sie uns darauf eingehen.
Schritt 1: Einrichten der Winkelmaterialtabelle
Stellen Sie zunächst sicher, dass in Ihrem Angular-Projekt Angular Material installiert ist. Wenn nicht, führen Sie den folgenden Befehl aus, um Angular Material zu Ihrem Projekt hinzuzufügen:
ng add @angular/material
Nach dem Login kopieren
Sobald Angular Material installiert ist, können Sie mit dem folgenden Code eine einfache Tabelle erstellen.
HTML für die Tabelle:
<div class="resizable-table">
<table mat-table [dataSource]="dataSource">
<ng-container *ngFor="let column of displayedColumns" [matColumnDef]="column">
<th mat-header-cell *matHeaderCellDef appColumnResize>{{ column }}</th>
<td mat-cell *matCellDef="let element">{{ element[column] }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
Nach dem Login kopieren
Hier verwenden wir mat-table von Angular Material, um eine einfache Tabelle anzuzeigen. Die appColumnResize-Direktive wird auf die th-Elemente (Header-Elemente) angewendet, um die Größe von Spalten zu ändern.
Daten für die Tabelle:
import { Component, ViewEncapsulation } from '@angular/core';
export interface PeriodicElement {
name: string;
position: number;
weight: number;
symbol: string;
}
const ELEMENT_DATA: PeriodicElement[] = [
{ position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
{ position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
// ... add more data
];
@Component({
selector: 'table-basic-example',
styleUrls: ['table-basic-example.scss'],
templateUrl: 'table-basic-example.html',
encapsulation: ViewEncapsulation.None,
})
export class TableBasicExample {
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
dataSource = ELEMENT_DATA;
}
Nach dem Login kopieren
Die Komponente enthält Daten für die periodischen Elemente, die wir in der Tabelle anzeigen.
Schritt 2: Erstellen der Anweisung zur Spaltengrößenänderung
Als nächstes implementieren wir eine benutzerdefinierte Angular-Direktive, die die Größenänderungsfunktion für die Tabellenspalten ermöglicht.
Richtlinienumsetzung:
import {
Directive,
ElementRef,
Renderer2,
NgZone,
Input,
OnInit,
OnDestroy,
} from '@angular/core';
import { fromEvent, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
@Directive({
selector: '[appColumnResize]',
})
export class ColumnResizeDirective implements OnInit, OnDestroy {
@Input() resizableTable: HTMLElement | null = null;
private startX!: number;
private startWidth!: number;
private isResizing = false;
private column: HTMLElement;
private resizer!: HTMLElement;
private destroy$ = new Subject<void>();
constructor(
private el: ElementRef,
private renderer: Renderer2,
private zone: NgZone
) {
this.column = this.el.nativeElement;
}
ngOnInit() {
this.createResizer();
this.initializeResizeListener();
}
private createResizer() {
this.resizer = this.renderer.createElement('div');
this.renderer.addClass(this.resizer, 'column-resizer');
this.renderer.setStyle(this.resizer, 'position', 'absolute');
this.renderer.setStyle(this.resizer, 'right', '0');
this.renderer.setStyle(this.resizer, 'top', '0');
this.renderer.setStyle(this.resizer, 'width', '5px');
this.renderer.setStyle(this.resizer, 'cursor', 'col-resize');
this.renderer.appendChild(this.column, this.resizer);
}
private initializeResizeListener() {
this.zone.runOutsideAngular(() => {
fromEvent(this.resizer, 'mousedown')
.pipe(takeUntil(this.destroy$))
.subscribe((event: MouseEvent) => this.onMouseDown(event));
fromEvent(document, 'mousemove')
.pipe(takeUntil(this.destroy$))
.subscribe((event: MouseEvent) => this.onMouseMove(event));
fromEvent(document, 'mouseup')
.pipe(takeUntil(this.destroy$))
.subscribe(() => this.onMouseUp());
});
}
private onMouseDown(event: MouseEvent) {
event.preventDefault();
this.isResizing = true;
this.startX = event.pageX;
this.startWidth = this.column.offsetWidth;
}
private onMouseMove(event: MouseEvent) {
if (!this.isResizing) return;
const width = this.startWidth + (event.pageX - this.startX);
this.renderer.setStyle(this.column, 'width', `${width}px`);
}
private onMouseUp() {
if (!this.isResizing) return;
this.isResizing = false;
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
}
Nach dem Login kopieren
Erläuterung:
-
createResizer(): Fügt ein Resizer-Element (div) zur Spaltenüberschrift hinzu.
-
onMouseDown(): Wird ausgelöst, wenn der Benutzer auf die Größenänderung klickt, und zeichnet die Anfangsposition auf.
-
onMouseMove(): Aktualisiert die Spaltenbreite, während der Benutzer die Größenänderung zieht.
-
onMouseUp(): Beendet die Größenänderung, wenn der Benutzer die Maustaste loslässt.
Schritt 3: Gestalten des Resizers
Wir müssen die Größenänderung so gestalten, dass Benutzer wissen, dass sie ziehbar ist. Fügen Sie Ihren Stilen das folgende CSS hinzu:
.resizable-table {
th {
position: relative;
.column-resizer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 10px;
cursor: col-resize;
z-index: 1;
&:hover {
border-right: 2px solid red;
}
}
&.resizing {
user-select: none;
}
}
&.resizing {
cursor: col-resize;
user-select: none;
}
}
Nach dem Login kopieren
Dieses CSS positioniert die Größenänderung korrekt, fügt einen Hover-Effekt hinzu und ändert den Cursor, um die Größenänderung anzuzeigen.
Schritt 4: Testen der Tabelle
Da nun die Anweisung und die Stile vorhanden sind, versuchen Sie, die Größe der Spalten zu ändern. Sie sollten in der Lage sein, auf die Größenänderung zu klicken, sie nach links oder rechts zu ziehen und die Breite jeder Spalte dynamisch anzupassen.
FAQs
F: Was passiert, wenn die skalierbare Tabelle zu breit ist?
A: Die Tabelle läuft über und passt sich der Breite des Containers an. Stellen Sie sicher, dass Sie das richtige Scrollverhalten oder Containeranpassungen hinzufügen, um große Tabellen zu verarbeiten.
F: Kann ich festlegen, dass die Größe bestimmter Spalten nicht geändert werden kann?
A: Ja, Sie können die appColumnResize-Direktive bedingt nur auf bestimmte Spalten anwenden, indem Sie die integrierten Strukturdirektiven von Angular wie *ngIf.
verwenden
F: Ist dieser Ansatz leistungsfreundlich für große Tabellen?
A: Diese Lösung funktioniert gut für mittelgroße Tische. Bei extrem großen Datensätzen möchten Sie jedoch möglicherweise eine weitere Optimierung vornehmen, indem Sie die Änderungserkennungsstrategie von Angular oder einen virtuellen Scrollmechanismus verwenden.
Abschluss
Wenn Sie dieser Anleitung folgen, verfügen Sie jetzt über eine voll funktionsfähige Funktion zum Ändern der Spaltengröße für Ihre Angular Material-Tabellen. Diese Anpassung erhöht die Flexibilität und Benutzerfreundlichkeit Ihrer Tabellen und sorgt für ein besseres Benutzererlebnis. Viel Spaß beim Codieren!
Das obige ist der detaillierte Inhalt vonBeherrschen der Größe veränderbarer Spalten in Angular Table: Eine Schritt-für-Schritt-Anleitung für Entwickler. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
