React Tree Grid에서 행 드래그

    React Tree Grid의 Ignite UI for React 쉽게 구성할 수 있으며, 마우스를 사용하여 새 위치로 드래그 앤 드롭하여 그리드 내에서 행을 재정렬하는 데 사용됩니다. 루트 IgrTreeGrid 구성 요소에서 초기화되며 rowDraggable 입력을 통해 구성할 수 있습니다.

    React Tree Grid Row Drag 예제

    EXAMPLE
    DATA
    TSX
    CSS
    Edit in:

    구성

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

    <IgrTreeGrid rowDraggable={true}>
</IgrTreeGrid>
tsx

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

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

        const dragIndicatorIconTemplate = (ctx: IgrGridEmptyTemplateContext) => {
        return (
            <>
                <IgrIcon name="drag_handle" collection="material" />
            </>
        );
    }

    <IgrTreeGrid rowDraggable={true} dragIndicatorIconTemplate={dragIndicatorIconTemplate}>
    </IgrTreeGrid>
tsx

    애플리케이션 데모

    행 재정렬 데모

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

    <IgrTreeGrid rowDraggable={true} primaryKey="ID" onRowDragStart={webTreeGridReorderRowStartHandler} onRowDragEnd={webTreeGridReorderRowStartHandler}>
</IgrTreeGrid>
tsx

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

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

    • 행이 확장되었나요? 그렇다면 접으세요.
    • 행이 그리드 내부에 삭제되었습니까?
    • 그렇다면 드래그된 행이 다른 어느 행에 삭제되었습니까?
    • ​대상 행을 찾았으면 data 배열에서 레코드 위치를 바꿉니다.
    • 행이 처음에 선택되었습니까? 그렇다면 선택됨으로 표시하세요.

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

    const webTreeGridReorderRowStartHandler = (args: IgrRowDragStartEventArgs) => {
    const draggedRow = args.detail.dragData;
    if (draggedRow.expanded) {
        draggedRow.expanded = false;
    }
}

const webTreeGridReorderRowHandler = (args: IgrRowDragEndEventArgs): void => {
    const ghostElement = args.detail.dragDirective.ghostElement;
    const dragElementPos = ghostElement.getBoundingClientRect();
    const rows = Array.prototype.slice.call(document.getElementsByTagName("igx-tree-grid-row"));
    const currRowIndex = getCurrentRowIndex(rows,
    { x: dragElementPos.x, y: dragElementPos.y });
    if (currRowIndex === -1) { return; }
    const draggedRow = args.detail.dragData.data;
    const childRows = findChildRows(treeGridRef.current.data, draggedRow);
    //remove the row that was dragged and place it onto its new location
    treeGridRef.current.deleteRow(args.detail.dragData.key);
    treeGridRef.current.data.splice(currRowIndex, 0, args.detail.dragData.data);
    // reinsert the child rows
    childRows.reverse().forEach(childRow => {
        treeGridRef.current.data.splice(currRowIndex + 1, 0, childRow);
    });
}

const findChildRows = (rows: any[], parent: any): any[] => {
    const childRows: any[] = [];
    rows.forEach(row => {
        if (row.ParentID === parent.ID) {
            childRows.push(row);
            // Recursively find children of current row
            const grandchildren = findChildRows(rows, row);
            childRows.push(...grandchildren);
        }
    });
    return childRows;
}

const getCurrentRowIndex = (rowList: any[], cursorPosition: any) => {
    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;
}
tsx

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

    또한 행 선택이 활성화되어 있으며 드래그된 행을 삭제할 때 선택이 유지됩니다.

    EXAMPLE
    DATA
    TSX
    CSS
    Edit in:

    제한 사항

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

    API 참조

    추가 리소스

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