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

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

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

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

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

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS
    Edit in:

    このサンプルが気に入りましたか? 完全な Ignite UI for Angularツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

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

    使用方法

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

    // app.module.ts

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

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

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

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

    これにより、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>
...

html

    以下のコード例は、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();
    }
}
typescript

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

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

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

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

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS
    Edit in:

    API リファレンス

    App Builder | CTA Banner

    その他のリソース

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