그리드에서 행 끌 Web Components

    Web Components 그리드의 Ignite UI for Web Components 행 드래그 기능은 쉽게 구성할 수 있으며 마우스를 사용하여 행을 새 위치로 끌어다 놓아 그리드 내의 행을 재정렬하는 데 사용됩니다. 루트 IgcGridComponent 구성 요소에서 초기화되며 입력을 통해 구성할 수 있습니다 rowDraggable.

    Web Components 그리드 행 드래그 예제

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

    구성

    ​IgcGridComponent에 대해 행 드래그를 활성화하려면 그리드의 rowDraggable​ ​true로 설정하기만 하면 됩니다. 이 기능이 활성화되면 행 끌기 핸들이 각 행에 표시됩니다. 이 핸들을 사용하여 행 끌기를 시작할 수 있습니다. 드래그 핸들을 클릭하고 버튼을 누른 채 커서를 움직이면 그리드의 RowDragStart 이벤트가 발생합니다. 언제든지 클릭을 놓으면 RowDragEnd 이벤트가 발생합니다.

    <igc-grid row-draggable="true">
</igc-grid>
html

    드래그 아이콘 템플릿 만들기

    드래그 핸들 아이콘은 그리드의 dragIndicatorIconTemplate 사용하여 템플릿화할 수 있습니다. 우리가 만들고 있는 예제에서 아이콘을 기본 아이콘(drag_indicator)에서 drag_handle로 변경해 보겠습니다.

    이를 위해 DragIndicatorIcon 사용하여 igc-grid 본문 내부에 템플릿을 전달할 수 있습니다.

    <igc-grid row-draggable="true" id="grid">
</igc-grid>
html
    constructor() {
    var grid = this.grid = document.getElementById('grid') as IgcHierarchicalGridComponent;
    grid.dragIndicatorIconTemplate = this.dragIndicatorIconTemplate;
}

public dragIndicatorIconTemplate = (ctx: IgcGridEmptyTemplateContext) => {
    return html`<igc-icon name="drag_handle" collection="material"></igc-icon>`;
}
ts
    Ignite UI for Web Components | CTA 배너

    애플리케이션 데모

    행 재정렬 데모

    그리드의 행 드래그 이벤트를 사용하면 행을 드래그하여 재정렬할 수 있는 그리드를 생성할 수 있습니다.

    <igc-grid id="grid" row-draggable="true" primary-key="ID">
</igc-grid>
html
    constructor() {
    var grid = this.grid = document.getElementById('grid') as IgcGridComponent;
    grid.addEventListener("rowDragEnd", this.webGridReorderRowHandler)
}
ts

    그리드에 대해 기본 키가 지정되어 있는지 확인하세요! 논리에는 행을 올바르게 다시 정렬할 수 있도록 행에 대한 고유 식별자가 필요합니다.

    ​rowDraggable 활성화되고 드롭 영역이 정의되면 드롭 이벤트에 대한 간단한 핸들러를 구현해야 합니다. 행을 드래그할 때 다음을 확인하세요.

    • 행이 그리드 내부에 삭제되었습니까?
    • 그렇다면 드래그된 행이 다른 어느 행에 삭제되었습니까?
    • ​대상 행을 찾았으면 data 배열에서 레코드 위치를 바꿉니다.

    아래에서 이것이 구현된 것을 볼 수 있습니다.

    public webGridReorderRowHandler(args: CustomEvent<IgcRowDragEndEventArgs>): void {
    const ghostElement = args.detail.dragDirective.ghostElement;
    const dragElementPos = ghostElement.getBoundingClientRect();
    const grid = document.getElementsByTagName("igc-grid")[0] as any;
    const rows = Array.prototype.slice.call(document.getElementsByTagName("igx-grid-row"));
    const currRowIndex = this.getCurrentRowIndex(rows,
    { x: dragElementPos.x, y: dragElementPos.y });
    if (currRowIndex === -1) { return; }
    // remove the row that was dragged and place it onto its new location
    grid.deleteRow(args.detail.dragData.key);
    grid.data.splice(currRowIndex, 0, args.detail.dragData.data);
}
    
public getCurrentRowIndex(rowList: any[], cursorPosition) {
    for (const row of rowList) {
        const rowRect = row.getBoundingClientRect();
        if (cursorPosition.y > rowRect.top + window.scrollY && cursorPosition.y < rowRect.bottom + window.scrollY &&
            cursorPosition.x > rowRect.left + window.scrollX && cursorPosition.x < rowRect.right + window.scrollX) {
            // return the index of the targeted row
            return parseInt(row.attributes["data-rowindex"].value);
        }
    }
    return -1;
}
typescript

    이러한 몇 가지 간단한 단계를 통해 드래그/드롭을 통해 행을 재정렬할 수 있는 그리드를 구성했습니다! 다음 데모에서 위 코드가 실제로 작동하는 모습을 볼 수 있습니다.

    드래그 아이콘을 누르고 있으면 그리드의 어느 곳으로든 행을 이동할 수 있습니다.

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    제한 사항

    현재 rowDraggable 에는 알려진 제한 사항이 없습니다.

    API 참조

    추가 리소스

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