Tree Grid 一括編集とトランザクション
IgxTreeGrid の一括編集機能は、HierarchicalTransactionService に基づいています。トランザクション サービス クラス階層トピックに従って、igxHierarchicalTransactionService の概要と実装方法の詳細を確認してください。
以下は、IgxTreeGrid コンポーネントで一括編集を有効にする方法の詳細な例です。
Angular Tree Grid 一括編集とトランザクションの例
以下は、トランザクションでプロバイダーとして一括編集を有効にし、また行編集を有効にする方法です。行編集全体を確定後にトランザクションが追加されるようにします。サンプルではフラット データソースを使用します。
このサンプルが気に入りましたか? 完全な Angular ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
Note
トランザクション ステートは、すべての更新、追加、削除された行、そして最後のステートで構成されます。
使用方法
IgxTreeGridModule を app.module.ts ファイルにインポートします。
// app.module.ts
...
import { IgxTreeGridModule } from 'igniteui-angular';
@NgModule({
...
imports: [..., IgxTreeGridModule],
...
})
export class AppModule {}
igxTransactionService を Tree Grid として、またはその親コンポーネントとして定義する必要があります。
import { Component, ViewChild } from "@angular/core";
import { IgxGridComponent, IgxGridTransaction, IgxToggleDirective,
IgxHierarchicalTransactionService, IgxTreeGridComponent } from "igniteui-angular";
@Component({
providers: [{ provide: IgxGridTransaction, useClass: IgxHierarchicalTransactionService }],
selector: "app-tree-grid-batch-editing-sample",
styleUrls: ["tree-grid-batch-editing-sample.component.scss"],
templateUrl: "tree-grid-batch-editing-sample.component.html"
})
export class TreeGridBatchEditingSampleComponent { }
Note
IgxGridTransaction はグリッドで定義されたインジェクション トークンです。
次に Tree Grid をバインドしたデータソースで定義し、rowEditable を true に設定してバインドします。
<igx-tree-grid #treeGrid [data]="data" primaryKey="employeeID" foreignKey="PID" width ="100%" height ="500px" rowEditable=true rowSelectable=true columnHiding=true>
...
</igx-tree-grid>
...
<button igxButton (click)="addRow()">Add Root Level Row</button>
<button igxButton [disabled]="!undoEnabled" (click)="undo()">Undo</button>
<button igxButton [disabled]="!redoEnabled" (click)="redo()">Redo</button>
<button igxButton [disabled]="!hasTransactions" (click)="openCommitDialog()">Commit</button>
...
以下のコード例は、HierarchicalTransactionService API (undo、redo、commit) の使用方法を示します。
...
export class TreeGridBatchEditingSampleComponent {
@ViewChild("treeGrid", { read: IgxTreeGridComponent }) public treeGrid: IgxTreeGridComponent;
...
public addRow() {
this.treeGrid.addRow({
PID: -1,
Title: "Junior Sales Representative",
employeeID: this.data.length + this.nextRow++,
firstName: "John",
lastName: "Doe"
});
}
public addChildRow(id) {
this.treeGrid.addRow(
{
Title: "Sales Manager",
employeeID: this.data.length + this.nextRow++,
firstName: `Added `,
lastName: "Added"
},
id);
}
public deleteRow(id) {
this.treeGrid.deleteRow(id);
}
public undo() {
/* exit edit mode */
this.treeGrid.endEdit(/* commit the edit transaction */ false);
this.treeGrid.transactions.undo();
}
public redo() {
this.treeGrid.transactions.redo();
}
public commit() {
this.treeGrid.transactions.commit(this.data);
this.toggle.close();
}
public cancel() {
this.dialog.close();
}
public discard() {
this.treeGrid.transactions.clear();
this.dialog.close();
}
public get undoEnabled(): boolean {
return this.treeGrid.transactions.canUndo;
}
public get redoEnabled(): boolean {
return this.treeGrid.transactions.canRedo;
}
public openCommitDialog() {
this.dialog.open();
this.dialogGrid.reflow();
}
public get hasTransactions(): boolean {
return this.treeGrid.transactions.getAggregatedChanges(false).length > 0;
}
}
Note
トランザクション API は編集の終了を処理しないので、自分で行う必要があります。そうしないと、グリッドは編集モードのままになります。これを行う 1 つの方法は、それぞれのメソッドで endEdit を呼び出すことです。
グリッド内の親ノードの削除にはいくつかの特徴があります。階層データを使用している場合、親を削除すると子も削除されます。フラットデータを使用している場合、グリッドの cascadeOnDelete プロパティを使用して必要な動作を設定できます。このプロパティは、親が削除されたときに子レコードを削除するかどうかを示します (デフォルトでは true に設定されています)。
Note
rowEditable プロパティを無効にすると Tree Grid を変更してセル変更でトランザクションを作成し、UI で行編集オーバーレイを公開しません。
