Grid 一括編集とトランザクション
igxGrid の一括編集機能は、TransactionService に基づいています。トランザクション サービス クラス階層トピックに従って、igxTransactionService の概要と実装方法の詳細を確認してください。
以下は、igxGrid コンポーネントで一括編集を有効にする方法の詳細な例です。
Angular Grid 一括編集とトランザクションの例
以下のサンプルは、グリッドにプロバイダーのトランザクションがあり、行編集が有効にされています。行編集全体を確定後にトランザクションが追加されるようにします。
このサンプルが気に入りましたか? 完全な Angular ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
Note
トランザクション ステートは、すべての更新、追加、削除された行、そして最後のステートで構成されます。
使用方法
IgxGridModule を app.module.ts ファイルにインポートします。
// app.module.ts
...
import { IgxGridModule } from 'igniteui-angular';
@NgModule({
...
imports: [..., IgxGridModule],
...
})
export class AppModule {}
igxTransactionService を Grid として、またはその親コンポーネントとして定義する必要があります。
import { Component } from "@angular/core";
import { IgxGridTransaction, IgxTransactionService } from "igniteui-angular";
@Component({
providers: [{ provide: IgxGridTransaction, useClass: IgxTransactionService }],
selector: "app-grid-with-transactions",
template: "<ng-content></ng-content>"
})
export class GridWithTransactionsComponent { }
Note
IgxGridTransaction はグリッドで定義されたインジェクション トークンです。
次に Grid をバインドしたデータソースで定義し、rowEditable を true に設定してバインドします。
<app-grid-with-transactions>
<igx-grid #gridRowEditTransaction [data]="data" [primaryKey]="'ProductID'" width="100%" height="500px"
[rowEditable]="true">
...
</igx-grid>
</app-grid-with-transactions>
...
<button igxButton [disabled]="!undoEnabled" (click)="undo()">Undo</button>
<button igxButton [disabled]="!redoEnabled" (click)="redo()">Redo</button>
...
<button igxButton (click)="commit()">Commit</button>
<button igxButton (click)="discard()">Discard</button>
...
以下のコード例は、transactions API (undo、redo、commit) の使用方法を示します。
...
export class GridBatchEditingSampleComponent {
@ViewChild("gridRowEditTransaction", { read: IgxGridComponent }) public gridRowEditTransaction: IgxGridComponent;
...
public get undoEnabled(): boolean {
return this.gridRowEditTransaction.transactions.canUndo;
}
public get redoEnabled(): boolean {
return this.gridRowEditTransaction.transactions.canRedo;
}
public undo() {
/* exit edit mode */
this.gridRowEditTransaction.endEdit(/* commit the edit transaction */ false);
this.gridRowEditTransaction.transactions.undo();
}
public redo() {
this.gridRowEditTransaction.transactions.redo();
}
public commit() {
this.gridRowEditTransaction.transactions.commit(this.data);
this.toggle.close();
}
public discard() {
this.gridRowEditTransaction.transactions.clear();
}
}
Note
トランザクション API は編集の終了を処理しないので、自分で行う必要があります。そうしないと、グリッドは編集モードのままになります。これを行う 1 つの方法は、それぞれのメソッドで endEdit を呼び出すことです。
Note
rowEditable プロパティを無効にすると Grid を変更してセル変更でトランザクションを作成し、UI で行編集オーバーレイを公開しません。
