ドロッケブルテーブル

この記事はもともと公開されているhowtomake.software .

我々は何を構築するつもりですか？

この記事では、行の並び替えを行うテーブルの作り方を紹介します.👇

何が我々に必要ですか？

アングルCDK

我々がドラッグ可能なテーブルのために必要とするすべての機能は、角度CDKパッケージの中にバンドルされます.まず最初にインストールしましょう.

npm install @angular/cdk

アンギュラCDKパッケージがプロジェクトにインストールされているときは、パッケージから使用することを正確に理解するための時間です.

アングルCDKテーブルモジュール

我々はドラッグテーブルを構築しているので、我々は必要な最初のテーブルです🙄. 角度CDKテーブルモジュールは、強力なテーブルを簡単に構築することができます.そのやり方を見てみましょう.
まず第一に、我々は角度のCDKテーブルをAppModule :

import { NgModule } from "@angular/core";
import { CdkTableModule } from "@angular/cdk/table";

@NgModule({
  imports: [CdkTableModule],
})
export class AppModule {}

CdkTableModule 基本テーブルのプリミティブディレクティブを使用できます:cdk-table , cdkColumnDef , cdk-header-cell , cdk-cell , などを話し合いましょう.

テーブル作成

テーブル自体を作成する必要があります.プレーンHTMLテーブルを加えて、それを使って角のCDKテーブルとしてマークしましょうcdk-table ディレクティブ

<table cdk-table></table>

次に、テーブル構造を設定する必要があります.このようにして、CdkTableModule . 一つずつ設定しましょう

ヘッダー行の設定

ヘッダー行はcdk-header-row . このディレクティブはcdk-table ヘッダー行のテンプレートであることを理解してください.それから、我々はcdkHeaderRowDef ディレクティブ.それは、示されるコラムのリストを受けます.

<tr
  cdk-header-row
  *cdkHeaderRowDef="['position', 'name', 'weight', 'symbol']"
></tr>

表行の設定

テーブル行はcdk-row . このディレクティブはcdk-table テーブル行のテンプレートであることを理解してください.それから、我々はcdkHeaderRowDef ディレクティブ.それは、示されるコラムのリストを受けます.

<tr
  cdk-row
  *cdkRowDef="let row; columns: ['position', 'name', 'weight', 'symbol'];"
></tr>

表セル構成

さて、表セルを設定する時です.

  <ng-container cdkColumnDef="position">
    <th cdk-header-cell *cdkHeaderCellDef> No. </th>
    <td cdk-cell *cdkCellDef="let element"> {{element.position}} </td>
  </ng-container>

  <ng-container cdkColumnDef="name">
    <th cdk-header-cell *cdkHeaderCellDef> Name </th>
    <td cdk-cell *cdkCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <ng-container cdkColumnDef="weight">
    <th cdk-header-cell *cdkHeaderCellDef> Weight </th>
    <td cdk-cell *cdkCellDef="let element"> {{element.weight}} </td>
  </ng-container>

  <ng-container cdkColumnDef="symbol">
    <th cdk-header-cell *cdkHeaderCellDef> Symbol </th>
    <td cdk-cell *cdkCellDef="let element"> {{element.symbol}} </td>
  </ng-container>

ここで最も重要な部分はcdkColumnDef . どのカラムを設定しているかを示します.あなたが覚えているように、私たちは角のCDKテーブルにちょうど以下の列をテーブルに持っていると言いました.['position', 'name', 'weight', 'symbol'] . 今、我々は使用しているcdkColumnDef="name" ここで設定している列をテーブルに伝えます.すべての列に対して、同じような設定があります.列の中に飛び込んでください.
各カラム定義の中には、2つの行があります.ヘッダセルかth番目、行セルかtdのいずれかです.

<th cdk-header-cell *cdkHeaderCellDef>Name</th>

この行は、name列のヘッダーセルを構成します.それは、それが経由でヘッダーセルであることを表に伝えますcdk-header-cell ディレクティブ.とセルテンプレートとしてマーク*cdkHeaderCellDef .

<td cdk-cell *cdkCellDef="let element">{{element.name}}</td>

この行は表行のセルがどのように見えるかを設定します.cdk-cell このセルをテーブルセルとしてマークします.And *cdkCellDef="let element" ディレクティブをテンプレートとしてマークし、アクティブ行へのリンクを提供しますelement .
しかし、どこで、我々はそれらの要素を得ますか?たった今、我々はテンプレートとデータに類似した何も持っていません!角cdkテーブルはdatasourceの概念で動作します.

データソース

角度CDKテーブルデータソース

データソースの概念は、どのように角度CDKテーブルにデータを提供できるかを説明します.これは次の3つの方法で行うことができます.

最も簡単な方法は、プレーンJavaScript配列を使用することです.それは物を含むべきです.そして、その場合、各オブジェクトは1つのテーブル行を表します.

使用Observable . その場合、配列のストリームを指定する必要があります.そのテーブルは毎回RerenderObservable 新しい配列を出力します.(このチュートリアルでは、この方法をデータソースに使用します).

使用DataSource 実装するオブジェクトDataSource インターフェースconnect/disconnect 関数.このアプローチは、より複雑なシナリオに役立ちます.特に私たちのデータストリームをクリーンアップする必要がある場合.これはdisconnect 機能.

テーブルにデータを添付するには？

まず最初にデータを配列で作りましょう.

export class AppComponent {
  private items: PeriodicElement[] = [
    {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
    {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
    {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
    {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
    {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
  ];
}

そして、そのデータを対象に押し込むべきです.ドラッグアンドドロップ中に行の順序を変更する必要があります.

export class AppComponent {
  datasource = new BehaviorSubject(this.items);
}

その後、データの流れがあるとき、テーブルに接続する必要があります.

<table [dataSource]="dataSource"></table>

そしてそれです.今、テーブルとデータソースが接続されています.今ではそれをドラッグできるように時間です!

ドラッグ＆ドロップ

ドラッグアンドドロップに必要なすべての機能は、角のCDK DragDropモジュール内にバンドルされます.では、まず最初にインポートしましょう.

import { NgModule } from "@angular/core";
import { DragDropModule } from '@angular/cdk/drag-drop';

@NgModule({
  imports: [DragDropModule],
})
export class AppModule {}

時DragDropModule がインストールされますcdkDrag and cdkDropList 要素をドラッグ可能にするために、我々のテンプレートの中の指令.どのように動作するか見てみましょう.

CDKドラッグ

<tr cdk-row *cdkRowDef="let row;" cdkDrag></tr>

これは数分前に定義したテーブル行です.でも今はcdkDrag ディレクティブ.このディレクティブは要素をドラッグします.

cddrodroplist

次のステップは、ドラッグ可能な要素のコンテナーを定義することです.この場合、テーブル行を再配置することになります.これは、我々のドラッグ可能な要素コンテナがテーブルであることを意味します.

<table cdk-table cdkDropList (cdkDropListDropped)="drop($event)"></table>

ちょうど追加しましたcdkDropList ディレクティブ.それはドラッグ可能な要素のコンテナとしてテーブルをマークし、我々はドロップイベントを使用してcdkDropListDropped ディレクティブ出力.したがって、ユーザーがテーブルのどこかで要素を解放すると、そのドロップイベントが表示されます.そして、テーブルのデータソースのデータを並べ替えることができます.
それで、あなたが上で気付くことができるので、私は加えましたdrop へのコールバックcdkDropListDropped イベント.私たちのテーブルを最終的に再編成可能にするためにそれを実装しましょう!

import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';


export class AppComponent {
  drop(event: CdkDragDrop<string[]>) {

    // Rearrange the data in the array
    moveItemInArray(this.items, event.previousIndex, event.currentIndex)

    // Publish a new version of the data into the datasource
    this.dataSource.next([...this.items]);
  }
}

何が起こっているのですか.我々は、ちょうどAを受けていますCdkDragDrop イベント.これは、アイテムを移動するすべての必要な情報が含まれます.それはpreviousIndex とcurrentIndex ユーザーが視覚的に移動した項目の.そして、それを使って前の場所から新しい場所へ移動できますmoveItemInArray 角のCDK DropDropモジュールによって提供される関数.
そして最後に、我々はちょうどテーブルにデータの新しいバージョンを公開している!簡単に!ここに結果がある👇

回収する

このチュートリアルでは、角のCDKテーブルとDragDropモジュールを使用して、再配置可能なテーブルを角度で作成する方法を学びました.私は、あなたがすべての詳細を得て、記事が好きであることを望みます.何かご質問がございましたら、どうぞお知らせください.
あなたが角度CDKについてのより多くの内容に興味があるならば、私に続いてください、そしてsubscribe to my newsletter 🔥