Arrastre de filas en Web Components cuadrícula de árbol

    La función de arrastre de filas Ignite UI for Web Components en Web Components cuadrícula de árbol es fácilmente configurable y se utiliza para reorganizar filas dentro de la cuadrícula arrastrándolas y soltándolas a una nueva posición con el mouse. Se inicializa en el componente raíz IgcTreeGridComponent y se puede configurar a través de la rowDraggable entrada.

    Web Components Ejemplo de arrastre de fila de cuadrícula de árbol

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Configuración

    Para habilitar el arrastre de filas para su IgcTreeGridComponent, todo lo que necesita hacer es establecer la cuadrícula en rowDraggable​ ​true. Una vez que esté habilitado, se mostrará un controlador de arrastre de fila en cada fila. Este controlador se puede utilizar para iniciar el arrastre de filas. Al hacer clic en el controlador de arrastre y mover el cursor mientras se mantiene presionado el botón, se activará el evento de RowDragStart la cuadrícula. Si suelta el clic en cualquier momento, se RowDragEnd activará el evento.

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

    Plantilla del icono de arrastre

    El icono del controlador de arrastre se puede crear como plantilla usando dragIndicatorIconTemplate de la cuadrícula. En el ejemplo que estamos creando, cambiemos el ícono predeterminado (drag_indicator) a drag_handle.

    Para hacerlo, podemos usar el DragIndicatorIcon para pasar una plantilla dentro del cuerpo de la igc-tree-grid:

    <igc-tree-grid row-draggable="true" id="grid">
</igc-tree-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 Banner

    Demostración de la aplicación

    Demostración de reordenamiento de filas

    Con la ayuda de los eventos de arrastre de filas de la cuadrícula, puede crear una cuadrícula que le permita reordenar las filas arrastrándolas.

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

    ¡Asegúrese de que haya una clave principal especificada para la cuadrícula! La lógica necesita un identificador único para las filas para que puedan reordenarse correctamente.

    Una vez que rowDraggable esté habilitado y se haya definido una zona de colocación, debe implementar un controlador simple para el evento de colocación. Cuando se arrastra una fila, verifique lo siguiente:

    • ¿Se amplía la fila? Si es así, colapsarlo.
    • ¿Se dejó caer la fila dentro de la cuadrícula?
    • Si es así, ¿en qué otra fila se soltó la fila arrastrada?
    • Una vez que haya encontrado la fila de destino, intercambie las ubicaciones de los registros en la matriz data.
    • ¿Se seleccionó inicialmente la fila? Si es así, márquelo como seleccionado.

    A continuación, puedes ver esto implementado:

    public webTreeGridReorderRowStartHandler(args: CustomEvent<IgcRowDragStartEventArgs){
        const draggedRow = args.detail.dragElement;
        const grid = this.treeGrid;
        const row = grid.getRowByIndex(draggedRow.getAttribute('data-rowindex'));
        if(row.expanded){
            row.expanded = false;
        }
    }

    public webTreeGridReorderRowHandler(args: CustomEvent<IgcRowDragEndEventArgs>): void {
        const ghostElement = args.detail.dragDirective.ghostElement;
        const dragElementPos = ghostElement.getBoundingClientRect();
        const grid = this.treeGrid;
        const rows = Array.prototype.slice.call(document.getElementsByTagName("igx-tree-grid-row"));
        const currRowIndex = this.getCurrentRowIndex(rows,
        { x: dragElementPos.x, y: dragElementPos.y });
        if (currRowIndex === -1) { return; }
        const draggedRow = args.detail.dragData.data;
        const childRows = this.findChildRows(grid.data, draggedRow);
        //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);
        // reinsert the child rows
        childRows.reverse().forEach(childRow => {
            grid.data.splice(currRowIndex + 1, 0, childRow);
        });
    }

    private 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 = this.findChildRows(rows, row);
                childRows.push(...grandchildren);
            }
        });
        return childRows;
    }

    public 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;
    }
ts

    ¡Con estos sencillos pasos, ha configurado una cuadrícula que permite reordenar filas mediante arrastrar y soltar! Puede ver el código anterior en acción en la siguiente demostración.

    Observe que también tenemos habilitada la selección de filas y conservamos la selección al soltar la fila arrastrada.

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    Limitaciones

    Actualmente, no existen limitaciones conocidas para rowDraggable.

    Referencias de API

    Recursos adicionales

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.