Premium

Angular Data Grid の行操作

The grid component in Ignite UI for Angular provides the ability to use ActionStrip and utilize CRUD for row/cell components and row pinning. The Action Strip component can host predefined UI controls for these operations.

使用方法

最初の手順は、app.module.ts ファイルに IgxActionStripModule をインポートすることです。

// app.module.ts

...
import { IgxActionStripModule } from 'igniteui-angular/action-strip';
// import { IgxActionStripModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxActionStripModule],
    ...
})

事前定義された actions UI コンポーネントは次のとおりです:

GridEditingActions - グリッド編集専用に設計された機能と UI を含みます。rowEditable オプションとグリッドの行削除に応じて、セルまたは行の編集モードをすばやく切り替えることができます。
GridPinningActions - グリッド行のピン固定のために特別に設計された機能と UI を含みます。行をすばやくピン固定し、ピン固定された行とその無効な行の間を移動できます。

これらは <igx-action-strip> 内に追加され、デフォルトのインタラクションを提供するアクションストリップを持つために必要です。

IgxActionStripComponent がグリッドの子コンポーネントの場合、行をホバーすると UI が自動的に表示されます。

<igx-grid [data]="data" [rowEditable]="true" [primaryKey]="'ID'">
    <igx-column *ngFor="let c of columns" [field]="c.field">
    </igx-column>

    <igx-action-strip #actionStrip>
        <igx-grid-pinning-actions></igx-grid-pinning-actions>
        <igx-grid-editing-actions></igx-grid-editing-actions>
    </igx-action-strip>
</igx-grid>

When IgxActionStripComponent is a child component of the grid, hovering a row will automatically show the UI.

カスタム実装

これらのコンポーネントは、カスタマイズのための柔軟性を提供するテンプレートを公開します。たとえば、delete、edit などの行アクションがある Gmail シナリオで ActionStrip を使用する場合、igx-icon でボタンコンポーネントを作成します。そして、クリックイベントを追加し、igx-action-strip コンポーネントに挿入します。

<igx-grid>
    <igx-action-strip #actionstrip>
        <igx-grid-pinning-actions></igx-grid-pinning-actions>
        <button title="Edit" igxIconButton="flat" igxRipple (click)='startEdit(actionstrip.context)'>
            <igx-icon>edit</igx-icon>
        </button>
        <button title="Delete" igxIconButton="flat" igxRipple *ngIf='!isDeleted(actionstrip.context)' (click)='actionstrip.context.delete()'>
            <igx-icon>delete</igx-icon>
        </button>
    </igx-action-strip>
</igx-grid>

これらのコンポーネントは IgxGridActionsBaseDirective を継承します。カスタムグリッドアクションコンポーネントを作成する場合、IgxGridActionsBaseDirective も継承する必要があります。

The predefined actions inherit IgxGridActionsBaseDirective and when creating a custom grid action component, it should also inherit IgxGridActionsBaseDirective.

API リファレンス

アクションストリップの API に関する詳細な情報は、以下のリンクのトピックを参照してください:

ActionStrip

アクションストリップで使用できるその他のコンポーネントとディレクティブ: