如何解决如何制作具有可拖动列和可拖动行的表
我创建了两个不同的表,一个表具有可拖动的列,一个表具有可拖动的行,但是我真正想要的是一个表,可以对它的列和行进行重新排序。
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
函数返回了
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 举报,一经查实,本站将立刻删除。