Menguasai Lajur Boleh Resizable dalam Jadual Sudut: Panduan Langkah demi Langkah untuk Pembangun

Cara Membuat Lajur Boleh Resizable dalam Jadual Sudut: Panduan Langkah demi Langkah

Jadual Bahan Sudut menyediakan cara yang anggun untuk memaparkan data. Walau bagaimanapun, pengguna sering menginginkan kefungsian tambahan seperti keupayaan untuk mengubah saiz lajur jadual untuk kawalan yang lebih baik ke atas paparan data. Dalam panduan ini, kami akan melalui proses mencipta lajur yang boleh diubah saiz dalam jadual Sudut menggunakan arahan tersuai. Anda akan belajar cara menyediakan arahan, menggayakan penyusun semula dan melaksanakan saiz semula lajur langkah demi langkah.

pengenalan

Menambah lajur boleh ubah saiz pada jadual Bahan Sudut melibatkan penciptaan arahan tersuai yang mendengar peristiwa tetikus, membenarkan pengguna mengklik dan menyeret lajur untuk melaraskan lebarnya. Ini memberikan pengguna kefleksibelan, terutamanya apabila berurusan dengan set data yang besar, meningkatkan pengalaman pengguna.

Dalam tutorial ini, kami akan:

• Buat arahan ubah saiz lajur tersuai.
• Kendalikan acara tetikus untuk mengubah saiz lajur.
• Gunakan gaya untuk pengalaman pengguna yang lancar.
• Lampirkan arahan pada jadual Bahan Sudut.

Mari kita mendalaminya.

Langkah 1: Menyediakan Jadual Bahan Sudut

Pertama, pastikan projek Angular anda telah dipasang Bahan Sudut. Jika tidak, jalankan arahan berikut untuk menambah Bahan Sudut pada projek anda:

ng add @angular/material

Setelah Bahan Sudut dipasang, anda boleh mencipta jadual asas menggunakan kod berikut.

HTML untuk Jadual:

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

Di sini, kami menggunakan mat-table daripada Angular Material untuk memaparkan jadual ringkas. Arahan appColumnResize digunakan pada elemen ke (pengepala) untuk menjadikan lajur boleh diubah saiz.

Data untuk Jadual:

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

Komponen termasuk data untuk elemen berkala, yang akan kami paparkan dalam jadual.

Langkah 2: Mencipta Arahan Ubah Saiz Lajur

Seterusnya, kami akan melaksanakan arahan Sudut tersuai yang membolehkan saiz semula fungsi untuk lajur jadual.

Pelaksanaan Arahan:

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

Penjelasan:

• createResizer(): Menambah elemen resizer (div) pada pengepala lajur.
• onMouseDown(): Dicetuskan apabila pengguna mengklik resizer, merekodkan kedudukan awal.
• onMouseMove(): Mengemas kini lebar lajur semasa pengguna menyeret resizer.
• onMouseUp(): Menamatkan saiz semula apabila pengguna melepaskan butang tetikus.

Langkah 3: Menggayakan Resizer

Kita perlu menggayakan resizer supaya pengguna tahu ia boleh diseret. Tambahkan CSS berikut pada gaya anda:

.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 ini meletakkan resizer dengan betul, menambah kesan tuding dan menukar kursor untuk menunjukkan kebolehubah saiz.

Langkah 4: Menguji Jadual

Sekarang arahan dan gaya telah disediakan, cuba ubah saiz lajur. Anda sepatutnya boleh mengklik pada resizer, seret ke kiri atau kanan dan laraskan lebar setiap lajur secara dinamik.

Soalan Lazim

S: Apa yang berlaku jika meja boleh ubah saiz terlalu lebar?

J: Jadual akan melimpah dan menyesuaikan berdasarkan lebar bekas. Pastikan anda menambah tingkah laku tatal atau pelarasan bekas yang betul untuk mengendalikan meja besar.

S: Bolehkah saya membuat lajur tertentu tidak boleh diubah saiz?

J: Ya, anda boleh menggunakan arahan appColumnResize secara bersyarat pada lajur tertentu sahaja dengan menggunakan arahan struktur terbina dalam Angular seperti *ngIf.

S: Adakah pendekatan ini mesra prestasi untuk meja besar?

J: Penyelesaian ini berfungsi dengan baik untuk jadual bersaiz sederhana. Walau bagaimanapun, untuk set data yang sangat besar, anda mungkin mahu mengoptimumkan lagi dengan menggunakan strategi pengesanan perubahan Angular atau mekanisme penatalan maya.

Kesimpulan

Dengan mengikuti panduan ini, anda kini mempunyai ciri lajur boleh diubah saiz berfungsi sepenuhnya untuk jadual Bahan Sudut anda. Penyesuaian ini meningkatkan fleksibiliti dan kebolehgunaan jadual anda, memberikan pengalaman pengguna yang lebih baik. Selamat mengekod!

Atas ialah kandungan terperinci Menguasai Lajur Boleh Resizable dalam Jadual Sudut: Panduan Langkah demi Langkah untuk Pembangun. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!