如何制作具有可拖动列和可拖动行的表

问题描述

我创建了两个不同的表，一个表具有可拖动的列，一个表具有可拖动的行，但是我真正想要的是一个表，可以对它的列和行进行重新排序。

• App.js文件，其中有DND（拖放组件），我正在向其中传递一些信息，例如要在其中渲染的组件的方向，显示和名称。 DND组件。

import React from 'react';
import DND from './components/DND'
import './css.css'
function App() {
//dont care about the `elements`
      let elements = [{ id: 0,text: 'first',checkBox: true },{ id: 1,text: 'second',checkBox: false },{ id: 2,text: 'third',checkBox: null }]
//I'm making the tow tables with different data setratcture in order to drag the columns of the the first table and to drag the rows of the second table (`TableH`)
      let table = [{ id: 0,row: ['Names','Ali',"Alex","sam"] },row: ['ages',23,22,26] },{ id: 3,row: ['emails','alihushamsci@','alexsci@','samsci@'] }]
      let table2 = [{ id: 0,row: ['names','ages'],type: 'column' },row: ['ali',23] },row: ['alex',26] }]
      return (
            <div>
                  <DND View={'Text'} display={'block'} direction={"vertical"} BoxStyle={{ background: 'white' }} elementsstyle={{ background: 'white' }} elements={elements} />
                  <DND View={'Table'} display={'flex'} direction={"horizontal"} BoxStyle={{ background: 'white' }} elementsstyle={{ background: 'white' }} elements={table} />
                  <DND View={'TableH'} display={'block'} direction={"vertical"} BoxStyle={{ background: 'white' }} elementsstyle={{ background: 'white' }} elements={table2} />
            </div>

      )
}

export default App

DND.jsx领域，我拥有Drop函数，其中返回了<Droppable，内部有Drag函数，而Drag函数返回了with the component calls键盘`

• 注意：Keyboard仅返回一个contentedtiable dive，我可以在其中敲击键盘快捷键，并且它会基于这些快捷键做出响应，因此与此处的主题无关。

import React,{ useState } from 'react';
import { DragDropContext,Draggable,Droppable } from 'react-beautiful-dnd'
import Keyboard from '../Actions/Keyboard';
const grid = 8

function DND({ View,elements,BoxStyle,elementsstyle,display,direction }) {

      const [state,set] = useState(elements)
      const [anchorEl,setAnchorEl] = useState(null);

      function Drag() {

            return (
                  <div style={{ display: display }}>
                        {state.map((e,index) => (
                              <Draggable key={`${index}`} draggableId={`${index}`} index={index} >
                                    {(provided,snapshot) => (
                                          <div
                                                ref={provided.innerRef}
                                                {...provided.draggableProps}
                                                {...provided.dragHandleProps}
                                          >
                                                <div>
                                                      <Keyboard View={View} Indexing={index} isDragging={snapshot.isDragging} anchorEl={anchorEl} setAnchorEl={setAnchorEl} elementsstyle={elementsstyle} state={state} set={set} e={e} />
                                                </div>
                                          </div>
                                    )}
                              </Draggable>
                        ))}
                  </div>
            )
      }
      function Drop() {
            return (
                  <Droppable droppableId='droppable' direction={direction}>
                        {(provided,snapshot) => (
                              <div
                                    ref={provided.innerRef}
                                    style={{
                                          padding: grid,overflow: 'auto',height: '300px',...BoxStyle
                                    }}
                              >
                                    {Drag(BoxStyle,elementsstyle)}
                                    {provided.placeholder}
                              </div>
                        )}
                  </Droppable>
            )
      }

      function reOrder(r) {
            const x = state
            const [removed] = x.splice(r.source.index,1);
            x.splice(r.destination.index,removed);
            setTimeout(() => {
                  set(x)
            },0)
      }

      return (
            <DragDropContext onDragEnd={reOrder}>
                  {Drop(state,elementsstyle)}
            </DragDropContext >
      )
}
export default DND

the vertically dragable table

import React,{ useState,useEffect } from 'react'

function Table({ e,isDragging,SetIsOver,DragIndicatorIcon,mouseIsOver,handlKey,searchValue,anchorEl,setAnchorEl,setSearch,Indexing }) {
      const [elem,setElem] = useState([])
      const columnsL = e.row.length

      return (
            <div style={{ width: '130px' }}>
                  {e.row.map(cell => <div style={{ border: '2px solid black',padding: '5px' }}>{cell}</div>)}
            </div>
      )
}

export default Table

the horizontally dragable table

import React,setElem] = useState([])
      const columnsL = e.row.length
      return (
            <div style={{}}>
                  {e.type !== 'column' && e.row.map(cell => <div style={{ border: '2px solid black',padding: '5px',display: 'inline-block',width: '130px' }}>{cell}</div>)}
                  {e.type == 'column' && e.row.map(cell => <div style={{ border: '2px solid black',width: '130px',background: 'gray' }}>{cell}</div>)}
            </div>
      )
}

export default Table

• 注意：拖曳表因数据结构而异

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）