Angular Grid 一括編集とトランザクション

    IgxGrid の一括編集機能は、TransactionService に基づいています。トランザクション サービス クラス階層トピックに従って、igxTransactionService の概要と、その実装方法の詳細を確認してください。

    以下は、Grid コンポーネントに対して一括編集を有効にする方法の詳細な例です。

    Angular Grid 一括編集とトランザクションの例

    以下のサンプルは、grid にプロバイダーのトランザクションがあり、batchEditing と行編集が有効にされています。行編集全体を確定後にトランザクションが追加されるようにします。

    Note

    トランザクション ステートは、すべての更新、追加、削除された行、そして最後のステートで構成されます。

    使用方法

    IgxGridModule を app.module.ts ファイルにインポートします。

    // app.module.ts

...
import { IgxGridModule } from 'igniteui-angular';

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

    次に、Grid から batchEditing を有効にします。

    <igx-grid [data]="data" [batchEditing]="true">
  ...
</igx-grid>

    これにより、igx-grid に Transaction サービスの適切なインスタンスが提供されます。適切な TransactionService は TransactionFactory を通じて提供されます。この内部実装の詳細については、トランザクション トピックを参照してください。

    一括編集を有効にした後、バインドされたデータ ソースと rowEditable を true に設定して IgxGrid を定義し、バインドします。

    <igx-grid #grid [batchEditing]="true" [data]="data" [primaryKey]="'ProductID'" width="100%" height="500px"
    [rowEditable]="true">
    ...
</igx-grid>
...
<button igxButton [disabled]="!grid.transactions.canUndo" (click)="undo()">Undo</button>
<button igxButton [disabled]="!grid.transactions.canRedo" (click)="redo()">Redo</button>
<button igxButton [disabled]="grid.transactions.getAggregatedChanges(false).length < 1"
    (click)="openCommitDialog(dialogGrid)">Commit</button>
...

    以下のコード例は、transactions API (undo、redo、commit) の使用方法を示します。

    export class GridBatchEditingSampleComponent {
    @ViewChild('grid', { read: IgxGridComponent }) public gridRowEditTransaction: IgxGridComponent;

    public undo() {
        /* exit edit mode and commit changes */
        this.grid.endEdit(true);
        this.grid.transactions.undo();
    }

    public redo() {
        /* exit edit mode and commit changes */
        this.grid.endEdit(true);
        this.grid.transactions.redo()
    }

    public commit() {
        this.grid.transactions.commit(this.data);
        this.toggle.close();
    }
}
    Note

    トランザクション API は編集の終了を処理しないので、自分で行う必要があります。そうしないと、Grid は編集モードのままになります。これを行う 1 つの方法は、それぞれのメソッドで endEdit を呼び出すことです。

    Note

    rowEditable プロパティを無効にすると Grid を変更してセル変更でトランザクションを作成し、UI で行編集オーバーレイを公開しません。

    一括編集のリモート ページング デモ

    完全なデモ構成をご覧ください。

    API リファレンス

    その他のリソース

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