Angular 데이터 그리드의 행 작업

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

Usage

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

// app.module.ts

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

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

사전 정의된 actions UI 구성 요소는 다음과 같습니다.

• IgxGridEditingActionsComponent- 그리드 편집을 위해 특별히 설계된 기능과 UI가 포함되어 있습니다. rowEditable 옵션과 그리드의 행 삭제에 따라 셀이나 행의 편집 모드를 빠르게 전환할 수 있습니다.

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

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

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