Web Components 그리드의 행 동작

Web Components Grid의 Ignite UI for Web Components 행 작업 기능을 통해 개발자는 행/셀 구성 요소 및 행 고정에 CRUD를 사용하고 IgcActionStrip 활용할 수 있습니다. 이러한 작업에 대해 편집 및 고정의 특정 행에 적용할 수 있는 몇 가지 미리 정의된 UI 컨트롤이 IgcGridComponent 있습니다.

Usage

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

IgcGridEditingActions-IgcGridComponent 편집을 위해 특별히 설계된 기능과 UI가 포함되어 있습니다. IgcGridComponent의 rowEditable 옵션 및 행 삭제에 따라 셀 또는 행의 편집 모드를 빠르게 전환할 수 있습니다.
IgcGridPinningActions-IgcGridComponent 행 고정을 위해 특별히 설계된 기능과 UI가 포함되어 있습니다. 이를 통해 행을 빠르게 고정하고 고정된 행과 비활성화된 행 사이를 탐색할 수 있습니다.

그것들은 내부에 IgcGridComponent 추가되며 이것은 모두 기본 상호 작용을 IgcActionStrip 제공하는 데 필요합니다.

<igc-grid row-editable="true" primary-key="ID">
    <igc-column field="field"></igc-column>
    <igc-action-strip>
        <igc-grid-pinning-actions></igc-grid-pinning-actions>
        <igc-grid-editing-actions></igc-grid-editing-actions>
    </igc-action-strip>
</igc-grid>

[!Note] When ActionStripComponent is a child component of the IgcGridComponent, hovering a row will automatically show the UI.

Custom Implementation

이러한 구성 요소는 사용자 지정을 위한 유연성을 제공하는 템플릿을 노출합니다. 예를 들어, IgcActionStrip 다음과 같은 행 작업이 있는 Gmail 시나리오의 경우 삭제하다, 편집하다 그리고 등등. 아이콘이 있는 버튼 구성 요소를 만들고 클릭 이벤트를 추가하고 삽입하기만 하면 됩니다. IgcActionStrip.

<igc-grid>
    <igx-action-strip #actionstrip>
        <igx-grid-pinning-actions></igx-grid-pinning-actions>
        <button title="Edit" igxButton="icon" igxRipple (click)='startEdit(actionstrip.context)'>
            <igx-icon>edit</igx-icon>
        </button>
        <button title="Delete" igxButton="icon" igxRipple *ngIf='!isDeleted(actionstrip.context)' (click)='actionstrip.context.delete()'>
            <igx-icon>delete</igx-icon>
        </button>
    </igx-action-strip>
</igc-grid>

<igc-grid>
    <igc-action-strip #actionstrip>
        <igc-grid-pinning-actions></igc-grid-pinning-actions>
        <igc-grid-editing-actions edit-row="true" delete-row="true"></igc-grid-editing-actions>
    </igc-action-strip>
</igc-grid>

API References

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.