es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Arrastrar y soltar con la tabla de árbol de Antd

22 Jul, 2023 Programación

Estoy intentando hacer que una tabla de árbol sea reordenable mediante arrastrar y soltar.

Aquí está la representación visual para una mejor comprensión:

enter image description here

También estoy usando React-DnD.

Aquí hay parte de mi código:

const moveRow = useCallback(
  (record: StructureElement) => (dragIndex, hoverIndex) => {
    // console.log(record.name, dragIndex, hoverIndex);
    const dragRow = sortableData[dragIndex];
    if (!dragRow) {
      console.log(sortableData, dragIndex);
    } else {
      console.log('drag', dragRow.name, 'hover', sortableData[hoverIndex].name);
    }
    // todo - cambiar el orden en el array
  },
  [sortableData],
);

<styledtreetable components="{components}" datasource="{sortableData}" onrow="{(record," index)=""> {
    return {
      index,
      moveRow: moveRow(record as StructureElement),
    };
  }}
/>

Entonces, el problema es que mi sortableData se ve así:

[
  { name: 1 },
  { name: 2 },
  {
    name: 3,
    children: [
      { name: 11 },
      { name: 22 },
      { name: 33, children: [{ name: 111 }, { name: 222 }, { name: 333 }] },
    ],
  },
];

Por lo tanto, mis objetos pueden tener más objetos anidados en children.

Pero la función moveRow no lo ve de esta manera. Para ella, ABSTRACT_STATE_4 tiene un índice de 4. Entonces, cuando intento reordenar el array, intento hacer esto: data[4], lo cual da como resultado undefined.

¿Existe alguna forma de reordenar los elementos en la tabla de árbol con arrastrar y soltar que aún no he encontrado?

La única forma que veo de resolverlo ahora es recrear el array de manera que los índices correspondan a los elementos “hover” y “drag”. Pero eso parece ser un trabajo innecesario.

¿Existe alguna forma de obtener el registro sobre el que estoy colocando el puntero, como obtengo hoverIndex?

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    ¿Cómo hacer que una tabla de árbol sea reordenable mediante arrastrar y soltar en React usando React-DnD?

    Si estás enfrentando problemas al intentar hacer que una tabla de árbol sea reordenable mediante arrastrar y soltar en React, aquí tienes una solución que puedes probar.

    En primer lugar, necesitas crear un componente para renderizar la tabla de árbol. Puedes utilizar el componente Tree de antd para crear una tabla de árbol.

    A continuación, necesitas envolver este componente con DragDropContext. Esto te permitirá agregar funcionalidad de arrastrar y soltar al componente.

    Aquí tienes un ejemplo de fragmento de código:

    import { DragDropContext, Droppable, Draggable } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import { Tree } from 'antd';

const TreeTable = ({ data }) => {
  const renderTreeNodes = (data) => {
    return data.map((item) => {
      if (item.children) {
        return (
          <draggable key="{item.key}" draggableid="{item.key}">
            {(provided) => (
              <tree.treenode {...provided.draggableprops}="" {...provided.draghandleprops}="" innerref="{provided.innerRef}" key="{item.key}" title="{item.title}" data="{item}">
                {renderTreeNodes(item.children)}
              </tree.treenode>
            )}
          </draggable>
        );
      }
      return (
        <draggable key="{item.key}" draggableid="{item.key}">
          {(provided) => (
            <tree.treenode {...provided.draggableprops}="" {...provided.draghandleprops}="" innerref="{provided.innerRef}" key="{item.key}" title="{item.title}" data="{item}"></tree.treenode>
          )}
        </draggable>
      );
    });
  };

  const onDragEnd = (result) => {
    //TODO: manejar la lógica de arrastrar y soltar aquí
  };

  return (
    <dragdropcontext backend="{HTML5Backend}">
      <droppable droppableid="tree">
        {(provided, snapshot) => (
          <tree classname="draggable-tree" showline="{true}" defaultexpandedkeys="{['0-0']}" draggable="{true}" ondragend="{onDragEnd}" {...provided.droppableprops}="" innerref="{provided.innerRef}" isdraggingover="{snapshot.isDraggingOver}">
            {renderTreeNodes(data)}
          </tree>
        )}
      </droppable>
    </dragdropcontext>
  );
};

    En este código, hemos utilizado los componentes Draggable y Droppable proporcionados por React-DnD. También hemos especificado una función onDragEnd que manejará la lógica de arrastrar y soltar una vez que se haya completado el arrastre.

    Con esta configuración, puedes arrastrar y soltar nodos de árbol y reordenarlos según sea necesario.

    Espero que esto te ayude a hacer que tu tabla de árbol sea reordenable mediante arrastrar y soltar.

Comments are closed.