掌握 Angular Table 中可調整大小的欄位：開發人員逐步指南

如何在 Angular 表中建立可調整大小的欄位：逐步指南

Angular Material 表提供了一種時尚的數據顯示方式。然而，使用者通常需要額外的功能，例如調整表列大小以更好地控制資料顯示的能力。在本指南中，我們將逐步介紹使用自訂指令在 Angular 表中建立可調整大小的列的過程。您將學習如何設定指令、調整大小的樣式以及逐步實施列大小調整。

介紹

向 Angular Material 表新增可調整大小的欄位涉及建立偵聽滑鼠事件的自訂指令，允許使用者點擊並拖曳列來調整其寬度。這為用戶提供了靈活性，尤其是在處理大型資料集時，改善了用戶體驗。

在本教學中，我們將：

• 建立自訂列調整大小指令。
• 處理滑鼠事件以調整列大小。
• 套用樣式以獲得流暢的使用者體驗。
• 將指令附加到 Angular Material 表。

讓我們深入探討一下。

第 1 步：設定角度材質表

首先，請確保您的 Angular 專案安裝了 Angular Material。如果沒有，請執行以下命令將 Angular Material 新增至您的專案中：

ng add @angular/material

安裝 Angular Material 後，您可以使用以下程式碼建立基本表格。

表格的 HTML：

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

在這裡，我們使用 Angular Material 中的 mat-table 來顯示一個簡單的表格。 appColumnResize 指令套用於 th（標題）元素以使列可調整大小。

表格資料：

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

該元件包含週期性元素的數據，我們將在表格中顯示這些數據。

第 2 步：建立列調整大小指令

接下來，我們將實作一個自訂 Angular 指令，該指令支援調整表列大小的功能。

指令實作：

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

解釋：

• createResizer()：將調整大小元素 (div) 新增至列標題。
• onMouseDown()：當使用者點擊縮放器時觸發，記錄初始位置。
• onMouseMove()：當使用者拖曳縮放器時更新列寬。
• onMouseUp()：當使用者釋放滑鼠按鈕時結束調整大小。

第 3 步：調整大小調整器的樣式

我們需要調整大小調整器的樣式，以便使用者知道它是可拖曳的。將以下 CSS 加入您的樣式：

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

此 CSS 正確定位調整大小，增加懸停效果，並變更遊標以指示可調整大小。

第 4 步：測試表

現在指令和樣式都已就位，請嘗試調整列的大小。您應該能夠按一下調整大小，向左或向右拖曳它，並動態調整每列的寬度。

常見問題解答

問：如果可調整大小的表格太寬會發生什麼事？

A：表格會溢出並依照容器的寬度進行調整。確保添加適當的滾動行為或容器調整來處理大型表格。

問：我可以讓特定列不可調整大小嗎？

答：是的，您可以使用 Angular 的內建結構指令（如 *ngIf）有條件地將 appColumnResize 指令僅套用至特定欄位。

問：這種方法對於大型錶來說性能友善嗎？

答：此解決方案適用於中等大小的桌子。然而，對於非常大的資料集，您可能希望透過使用 Angular 的更改檢測策略或虛擬滾動機制來進一步優化。

結論

透過遵循本指南，您現在可以為 Angular Material 表提供功能齊全的可調整大小的列功能。這種自訂增強了表的靈活性和可用性，提供更好的使用者體驗。快樂編碼！

以上是掌握 Angular Table 中可調整大小的欄位：開發人員逐步指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！