كيفية إنشاء أعمدة يمكن تغيير حجمها في الجدول الزاوي: دليل خطوة بخطوة

توفر جداول المواد الزاوية طريقة أنيقة لعرض البيانات. ومع ذلك، غالبًا ما يرغب المستخدمون في الحصول على وظائف إضافية مثل القدرة على تغيير حجم أعمدة الجدول لتحسين التحكم في عرض البيانات. في هذا الدليل، سنتعرف على عملية إنشاء أعمدة يمكن تغيير حجمها في جدول Angular باستخدام توجيه مخصص. ستتعلم كيفية إعداد التوجيه، وتصميم نمط تغيير الحجم، وتنفيذ تغيير حجم العمود خطوة بخطوة.

مقدمة

تتضمن إضافة أعمدة يمكن تغيير حجمها إلى جدول Angular Material إنشاء توجيه مخصص يستمع إلى أحداث الماوس، مما يسمح للمستخدمين بالنقر على العمود وسحبه لضبط عرضه. وهذا يمنح المستخدمين المرونة، خاصة عند التعامل مع مجموعات البيانات الكبيرة، مما يحسن تجربة المستخدم.

في هذا البرنامج التعليمي، سنقوم بما يلي:

• إنشاء توجيه مخصص لتغيير حجم العمود.
• التعامل مع أحداث الماوس لتغيير حجم الأعمدة.
• تطبيق الأنماط لتجربة مستخدم سلسة.
• أرفق التوجيه بجدول المواد الزاوي.

دعونا نتعمق في الأمر.

الخطوة 1: إعداد جدول المواد الزاوي

أولاً، تأكد من تثبيت Angular Material على مشروعك Angular. إذا لم يكن الأمر كذلك، قم بتشغيل الأمر التالي لإضافة Angular Material إلى مشروعك:

ng add @angular/material

بمجرد تثبيت Angular Material، يمكنك إنشاء جدول أساسي باستخدام الكود التالي.

HTML للجدول:

  
      

    
{{ column }}
      
{{ element[column] }}
    
    

    

  

هنا، نستخدم حصيرة الطاولة من Angular Material لعرض طاولة بسيطة. يتم تطبيق توجيه appColumnResize على العناصر (الرأس) لجعل الأعمدة قابلة لتغيير حجمها.

بيانات الجدول:

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

  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: اختبار الجدول

الآن بعد أن أصبحت التوجيهات والأنماط في مكانها الصحيح، حاول تغيير حجم الأعمدة. يجب أن تكون قادرًا على النقر على أداة تغيير الحجم، وسحبه إلى اليسار أو اليمين، وضبط عرض كل عمود ديناميكيًا.

الأسئلة الشائعة

س: ماذا يحدث إذا كان الجدول القابل لتغيير الحجم عريضًا جدًا؟

ج: سوف يفيض الجدول ويتم ضبطه بناءً على عرض الحاوية. تأكد من إضافة سلوك التمرير المناسب أو تعديلات الحاوية للتعامل مع الجداول الكبيرة.

س: هل يمكنني جعل أعمدة معينة غير قابلة لتغيير الحجم؟

ج: نعم، يمكنك تطبيق توجيه appColumnResize بشكل مشروط على أعمدة محددة فقط باستخدام التوجيهات الهيكلية المضمنة في Angular مثل *ngIf.

س: هل هذا النهج ملائم للأداء بالنسبة للطاولات الكبيرة؟

ج: يعمل هذا الحل بشكل جيد مع الطاولات متوسطة الحجم. ومع ذلك، بالنسبة لمجموعات البيانات الكبيرة للغاية، قد ترغب في تحسينها بشكل أكبر باستخدام استراتيجية اكتشاف التغيير في Angular أو آلية التمرير الافتراضية.

خاتمة

باتباع هذا الدليل، لديك الآن ميزة عمود قابلة لتغيير الحجم تعمل بكامل طاقتها لجداول Angular Material الخاصة بك. يعمل هذا التخصيص على تحسين مرونة الجداول وسهولة استخدامها، مما يوفر تجربة مستخدم أفضل. برمجة سعيدة!