Beherrschen der Größe veränderbarer Spalten in Angular Table: Eine Schritt-für-Schritt-Anleitung für Entwickler

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

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>

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;
}

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();
  }
}

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;
  }
}

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!