Angular 계층형 그리드의 행 작업

Ignite UI for Angular의 계층적 그리드 구성 요소는 ActionStrip을 사용하고 행/셀 구성 요소와 행 고정을 위해 CRUD를 활용할 수 있는 기능을 제공합니다. Action Strip 구성 요소는 이러한 작업에 대해 미리 정의된 UI 컨트롤을 호스팅할 수 있습니다.

Usage

첫 번째 단계는 app.module.ts 파일에서 IgxActionStripModule을 가져오는 것입니다.

// app.module.ts

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

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

미리 정의actions 된 UI 구성 요소는 다음과 같습니다:

• IgxGridEditingActionsComponent- 그리드 편집을 위해 특별히 설계된 기능과 UI 포함. 이 기능은 격자의 선택과 행 삭제 여부에rowEditable 따라 셀이나 행의 편집 모드를 빠르게 전환할 수 있게 해줍니다.

• IgxGridPinningActionsComponent- 그리드 행 고정을 위해 특별히 설계된 기능과 UI를 포함합니다. 이 기능은 빠르게 줄 고정을 하고, 고정된 행과 비활성화된 행 사이를 탐색할 수 있게 해줍니다.

이들은 내부에 추가<igx-action-strip> 되며, 이 모든 것이 기본 상호작용을 제공하는 액션 스트립을 갖추기 위해 필요합니다.

<igx-hierarchical-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-hierarchical-grid>

Note

그리드의 자식 구성 요소가 있을 때IgxActionStripComponent, 행을 올리면 자동으로 UI가 표시됩니다.

Custom implementation

이 컴포넌트들은 템플릿을 노출하여 맞춤화에 유연성을 제공합니다. 예를 들어,ActionStrip Gmail 시나리오에서 행 액션delete​edit이 있는 경우, 버튼 컴포넌트를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>

Note

미리 정의된 액션이 상속되며IgxGridActionsBaseDirective, 커스텀 그리드 액션 컴포넌트를 만들 때도 상속IgxGridActionsBaseDirective 되어야 합니다.

API References

Action Strip API에 대한 자세한 내용은 다음 링크를 참조하세요.

• IgxActionStripComponent API

액션 스트립 내에서 사용할 수 있는 추가 구성요소 및/또는 지시어:

• IgxGridActionsBaseDirective
• IgxGridPinningActionsComponent
• IgxGridEditingActionsComponent
• IgxDividerDirective