Data Grid 行選択

Ignite UI for Angular 行選択は、行内のすべての列の前に描画されるチェックボックス列にあるチェックボックスで行を選択/選択解除でき、データを含む複数の行を選択/選択解除できます。

デモ

構成

単一選択

グリッドの単一選択を grid の onSelection イベントで構成できます。イベントはセル コンポーネントへの参照を発行します。イベントはセル コンポーネントへの参照を発行し、そのセルコンポーネントは含まれる行コンポーネントへの参照を含みます。行コンポーネント参照の rowID ゲッターを使用して、rowData[primaryKey] または rowData オブジェクト自身を使用して行の一意識別子を selectionAPI の適切なリストに渡します。単一行のみを選択させるには、selectionAPI 行選択リストを空にします。これは selectRows メソッドの呼び出しの 2 番目の引数です。

    <!-- in example.component.html -->
    ...
    <igx-grid #grid1 [data]="remote | async" [rowSelectable]="false" (onSelection)="handleRowSelection($event)"
      [width]="'800px'" [height]="'600px'" [allowFiltering]="true">
            ...
    </igx-grid>
    ...
    /* in examplegrid.component.ts */
    public handleRowSelection(args) {
        const targetCell = args.cell as IgxGridCellComponent;
        if (!this.selection) {
            this.grid1.selectRows([targetCell.row.rowID], true);
        }
    }

複数選択

複数行選択を有効にするには、igx-gridrowSelectable プロパティを使用します。rowSelectabletrue に設定すると、各行およびグリッド ヘッダーで選択チェックボックス フィールドが有効になります。チェックボックスを使用して複数行を選択でき、スクロール、ページング、および並べ替えとフィルターなどのデータ操作で選択が保持されます。

    <igx-grid #grid1 [data]="remote | async" [primaryKey]="'ProductID'" [rowSelectable]="selection" (onSelection)="handleRowSelection($event)"
      [width]="'800px'" [height]="'600px'" [allowFiltering]="true">

: グリッドにリモート仮想化がある場合に行選択およびセル選択が正しく動作するには、primaryKey を設定します。

: グリッドでリモート仮想化が有効な場合、ヘッダー チェックボックスをクリックすると、すべてのレコードを選択/選択解除できます。すべてのレコードをヘッダー チェックボックスで選択した後に表示行の選択が解除された場合、オンデマンドでグリッドに新しいデータを読み込んだ際に新しく読み込んだ行が選択されない機能制限があります。

: フィルタリング機能が有効にされる場合、selectAllRows() および deselectAllRows()フィルターされた行のみを選択/選択解除します。

: セル選択は onSelection をトリガーしますが、onRowSelectionChange をトリガーしません。

コード スニペット

コードで行を選択

以下のコード例は primaryKey を使用して単一または複数行を選択します。

<!-- in component.html -->
<igx-grid ... [primaryKey]="'ID'">
...
</igx-grid>
...
<button (click)="this.grid.selectRows([1,2,5])">Select 1,2 and 5</button>

1、2、および 5 の ID を持つデータ エントリに相対する行をグリッド選択に追加します。

選択イベントのキャンセル

<!-- in component.html -->
<igx-grid
    (onRowSelectionChange)="handleRowSelectionChange($event)"
>
...
</igx-grid>
// in component.ts
public handleRowSelectionChange(args) {
    args.newSelection = args.oldSelection; // overwrites the new selection, making it so that no new row(s) are entered in the selectionAPI
    args.checked = false; // overwrites the checkbox state
}

API 参照

追加のリソース

コミュニティに参加して新しいアイデアをご提案ください。