Components List

Angular Tree Grid の行操作

Ignite UI for Angular のツリーグリッドコンポーネントは、ActionStrip を使用し、行/セルコンポーネントおよび行のピン固定に CRUD を使用する機能を提供します。デフォルトで 2 つのグリッドアクションが提供されます。アクションストリップコンポーネントは、これらの操作用に事前定義された UI コントロールをホストできます。

使用方法

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

// app.module.ts

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

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

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

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

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

<igx-tree-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-tree-grid>
html

IgxActionStripComponent がグリッドの子コンポーネントの場合、行をホバーすると 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>
html

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { TreeGridActionStripSampleComponent } from "./tree-grid/tree-grid-action-strip/tree-grid-action-strip-sample";
import { 
	IgxTreeGridModule,
	IgxDialogModule,
	IgxButtonModule,
	IgxActionStripModule
 } from "igniteui-angular";
import { IgxPreventDocumentScrollModule } from "./directives/prevent-scroll.directive";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	TreeGridActionStripSampleComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxPreventDocumentScrollModule,
	IgxTreeGridModule,
	IgxDialogModule,
	IgxButtonModule,
	IgxActionStripModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
ts

import { Component, ViewChild } from '@angular/core';
import { IgxTreeGridComponent, RowType, Transaction } from 'igniteui-angular';
import { generateEmployeeDetailedFlatData } from '../data/employees-flat-detailed';

@Component({
    selector: 'app-tree-grid-row-action-strip',
    styleUrls: [`tree-grid-action-strip-sample.scss`],
    templateUrl: 'tree-grid-action-strip-sample.html'
})
export class TreeGridActionStripSampleComponent {
    @ViewChild('treeGrid', { read: IgxTreeGridComponent, static: true }) public grid: IgxTreeGridComponent;

    public data: any[];
    public discardedTransactionsPerRecord: Map<number, Transaction[]> = new Map<number, Transaction[]>();

    constructor() {
        this.data = generateEmployeeDetailedFlatData();
    }

    public isDirty(rowContext: RowType) {
        const isRowEdited = this.grid.transactions.getAggregatedChanges(true).find(x => x.id === rowContext?.key);
        return rowContext && (rowContext.deleted || isRowEdited);
    }

    public isDeleted(rowContext: RowType) {
        return rowContext && rowContext.deleted;
    }

    public inEditMode(rowContext: RowType) {
        return rowContext && rowContext.inEditMode;
    }

    public startEdit(rowContext: RowType): void {
        const firstEditable = rowContext.cells.filter(cell => cell.editable)[0];
        const grid = rowContext.grid;

        if (grid.rowList.filter(r => r === rowContext).length !== 0) {
            grid.gridAPI.crudService.enterEditMode(firstEditable);
            firstEditable.activate(null);
        }
    }

    public commit(rowContext: RowType) {
        this.grid.transactions.commit(this.grid.data, rowContext.key);
        this.discardedTransactionsPerRecord.set(rowContext.key, []);
    }

    public redo(rowContext: RowType) {
        const rowID = rowContext.key;
        const lastDiscarded = this.discardedTransactionsPerRecord.get(rowID);
        lastDiscarded.forEach((transaction) => {
            const recRef = this.grid.gridAPI.get_rec_by_id(transaction.id);
            this.grid.transactions.add(transaction, recRef);
        });
        this.discardedTransactionsPerRecord.set(rowID, []);
    }

    public hasDiscardedTransactions(rowContext: RowType) {
        if (!rowContext) { return false; }
        const lastDiscarded = this.discardedTransactionsPerRecord.get(rowContext.key);
        return lastDiscarded && lastDiscarded.length > 0;
    }

    public undo(rowContext: RowType) {
        const transactionsToDiscard = this.grid.transactions.getAggregatedChanges(true)
        .filter(x => x.id === rowContext.key);
        this.discardedTransactionsPerRecord.set(rowContext.key, transactionsToDiscard);
        this.grid.transactions.clear(rowContext.key);
    }
}
ts

<div class="grid__wrapper">
    <igx-tree-grid [igxPreventDocumentScroll]="true" #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID" width="100%"
        height="500px" [rowEditable]="true" [batchEditing]="true" [allowFiltering]="true">
        <igx-column [field]="'Name'" dataType="string" [sortable]="true" [disableHiding]="true"></igx-column>
        <igx-column [field]="'ID'" dataType="number" [sortable]="true"></igx-column>
        <igx-column [field]="'Title'" dataType="string" [sortable]="true" [disableHiding]="true"></igx-column>
        <igx-column [field]="'HireDate'" dataType="date" [sortable]="true" [hidden]="true"></igx-column>
        <igx-column [field]="'Age'" dataType="number" [sortable]="true" [hidden]="true"></igx-column>
        <igx-column [field]="'Address'" dataType="string" [sortable]="true"></igx-column>
        <igx-column [field]="'City'" dataType="string" [sortable]="true"></igx-column>
        <igx-column [field]="'Country'" dataType="string" [sortable]="true"></igx-column>
        <igx-column [field]="'Fax'" dataType="string" [sortable]="true"></igx-column>
        <igx-column [field]="'PostalCode'" dataType="string" [sortable]="true"></igx-column>
        <igx-column [field]="'Phone'" dataType="string" [sortable]="true"></igx-column>
        <igx-action-strip #actionstrip>
            <igx-grid-pinning-actions></igx-grid-pinning-actions>
            <ng-container *ngIf="!inEditMode(actionstrip.context)">
                <button title="Edit" igxButton="icon" igxRipple
                    (click)='startEdit(actionstrip.context)'>
                    <igx-icon>edit</igx-icon>
                </button>
                <button title="Undo All" igxButton="icon" igxRipple *ngIf='isDirty(actionstrip.context)'
                    (click)='undo(actionstrip.context)'>
                    <igx-icon>undo</igx-icon>
                </button>
                <button title="Redo All" igxButton="icon" igxRipple
                    *ngIf='!isDirty(actionstrip.context) && hasDiscardedTransactions(actionstrip.context)'
                    (click)='redo(actionstrip.context)'>
                    <igx-icon>redo</igx-icon>
                </button>
                <button title='Save' igxButton="icon" igxRipple *ngIf='isDirty(actionstrip.context)'
                    (click)='commit(actionstrip.context)'>
                    <igx-icon>save</igx-icon>
                </button>
                <button title="Delete" igxButton="icon" igxRipple *ngIf='!isDeleted(actionstrip.context)'
                    (click)='actionstrip.context.delete()'>
                    <igx-icon>delete</igx-icon>
                </button>
            </ng-container>
        </igx-action-strip>
    </igx-tree-grid>
</div>
html

.grid__wrapper {
    margin: 15px;
}
scss

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

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

API リファレンス

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

IgxActionStripComponent API

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

Angular Tree Grid の行操作

使用方法

カスタム実装

API リファレンス

テーマ設定