项目背景 : react + ant
需求 : 点击表头设置弹窗 , 拖拽可控制外部表格列的排序 , 开关可控制外部表格列的显示和隐藏
实现效果如下 :
注意 : 1. 拖拽效果参考了ant-table中的拖拽效果(这块代码放最后)
2. 后台反了json格式(用is_show控制显示和隐藏 , 我给他传递sort值来控制排序 , 后台返回格式如下~)
3. 将拖拽和显示隐藏后的内容存到了localStorage
实现 :
const [biaotouData, setBiaotouData] = useState([
{
key: 'orderNumber',
orderNumber: '工单编号'
},
{
key: 'placeName',
orderNumber: '地点'
},
.....
])
const biaotouColumns = [
{
render: () => <DragHandle /> // 让拖拽图标在第一列
},
{
title: (
<span style={{ color: dropdownOpen1 ? ' var(--main-bg)' : '#333' }}>
{t('HeaderColumn')}
</span>
),
dataIndex: 'orderNumber',
align: 'center',
key: 'orderNumber'
},
{
title: (
<span style={{ color: dropdownOpen2 ? ' var(--main-bg)' : '#333' }}>
{t('WhetherDisplayed')}
</span>
),
align: 'center',
dataIndex: 'placeName',
key: 'placeName',
render: (data, record) => (
<div>
<Switch
checked={getIsShowForColumn(record.key)} // 使用getIsShowForColumn函数获取当前列的is_show状态
onChange={data => handleSwitchChange(record, data)}
/>
</div>
)
}
]
const sortedColumns = sortColumnsBySort(tableColumns) // 排序后的列,传递给外部的table
const [biaotouModal, setBiaotouModal] = useState(false) // 控制表头设置的显示隐藏
const [sortData, setSortData] = useState() //拿到表头列的显示状态
// 打开表头设置弹窗
const biaotouHandle = async () => {
setBiaotouModal(true)
const res = await getList7({ type: 3 })
console.log('res.titleSetContent', res.titleSetContent)
setSortData(JSON.parse(res.titleSetContent))
}
// 排序
function sortColumnsBySort (columns) {
return columns.sort((a, b) => a.sort - b.sort)
}
// 在渲染Switch的地方，查找当前列对应的is_show值
const getIsShowForColumn = columnName => {
return sortData?.find(item => item.name === columnName)?.is_show ?? true // 如果找不到，默认为true
}
// 当拖拽和显示和隐藏后外部表格更新
useEffect(() => {
if (sortData) {
const updateAndHandleResponse = async () => {
const res = await getEditMethod3({
titleSetContent: JSON.stringify(sortData),
type: 3
})
localStorage.setItem('hiddenColumns1', JSON.stringify(sortData))
const updatedColumns = tableColumns.map(column => {
if (
sortData.find(
item => item.name === column.key && item.is_show === false
)
) {
return { ...column, hidden: true }
} else if (
sortData.find(
item => item.name === column.key && item.is_show === true
)
) {
return { ...column, hidden: false }
}
return column
})
setTableColumns(updatedColumns)
}
updateAndHandleResponse()
}
}, [sortData, biaotouModal])
// 当拖拽和显示和隐藏后外部表格更新
useEffect(() => {
const storedHiddenColumns = localStorage.getItem('hiddenColumns1')
if (storedHiddenColumns) {
const hiddenColumns = JSON.parse(storedHiddenColumns)
const updatedTableColumns = tableColumns.map(column => {
if (
hiddenColumns.find(
item => item.name === column.key && item.is_show === false
)
) {
return { ...column, hidden: true }
} else if (
hiddenColumns.find(
item => item.name === column.key && item.is_show === true
)
) {
return { ...column, hidden: false }
}
return column
})
setTableColumns(updatedTableColumns)
}
return () => {
}
}, [])------------------------------------------------这是表头设置的table 和 外部的table 和 拖拽代码--------------
// 表头设置里的table
<DndContext
modifiers={[restrictToVerticalAxis]}
onDragEnd={onDragEnd}
>
<SortableContext
items={biaotouData.map(i => i?.key)}
strategy={verticalListSortingStrategy}
>
<SimpleBar
style={{
maxHeight: '600px',
overflowY: 'auto',
display: 'block'
}}
className='SimpleBar'
>
<Table
columns={biaotouColumns}
dataSource={biaotouData}
loading={loading}
pagination={false}
components={{
body: {
row: Row1
}
}}
rowKey='key'
></Table>
</SimpleBar>
</SortableContext>
</DndContext>
// 外部的table
{TableCom2({ loading, data, columns: sortedColumns })}
//被拖拽后
const onDragEnd = ({ active, over }) => {
console.log('active', active)
if (active.id !== over?.id) {
setBiaotouData(biaotouData => {
const activeIndex = biaotouData.findIndex(
item => item?.key === active.id
)
const overIndex = biaotouData.findIndex(item => item?.key === over?.id)
const newData = arrayMove(biaotouData, activeIndex, overIndex).map(
(item, index) => ({
...item,
sort: index + 1
})
)
// 创建一个新的映射以方便查找
const keyToSortMap = newData.reduce((map, item) => {
map[item.key] = item.sort
return map
}, {})
console.log('keyToSortMap', keyToSortMap)
// 遍历sortData，根据name查找对应的新Data中的sort值并赋值
sortData.forEach(item => {
if (item.name in keyToSortMap) {
item.sort = keyToSortMap[item.name]
}
})
// 遍历sortData，根据name查找对应的新Data中的sort值并赋值
tableColumns.forEach(item => {
if (item.key in keyToSortMap) {
item.sort = keyToSortMap[item.key]
}
})
setTableColumns(tableColumns)
localStorage.setItem('hiddenColumns1', JSON.stringify(sortData))
console.log('Updated sortData:', sortData)
console.log('sortData', sortData)
console.log('newData', newData)
console.log('tableColumns', tableColumns)
getEditMethod3({
titleSetContent: JSON.stringify(sortData),
type: 3
})
return arrayMove(biaotouData, activeIndex, overIndex)
})
}
}
//控制是否可以选中表格里的文字
const Row1 = props => {
const {
attributes,
listeners,
setNodeRef,
setActivatorNodeRef,
transform,
transition,
isDragging
} = useSortable({
id: props['data-row-key']
})
const style = {
...props.style,
transform: CSS.Translate.toString(transform),
transition,
...(isDragging
? {
position: 'relative',
zIndex: 9999
}
: {})
}
const contextValue = useMemo(
() => ({
setActivatorNodeRef,
listeners
}),
[setActivatorNodeRef, listeners]
)
return (
<RowContext.Provider value={contextValue}>
<tr {...props} ref={setNodeRef} style={style} {...attributes} />
</RowContext.Provider>
)
}
//拖拽图标
const DragHandle = () => {
const { setActivatorNodeRef, listeners } = useContext(RowContext)
return (
<Button
type='text'
size='small'
icon={<HolderOutlined />}
style={{
cursor: 'move'
}}
ref={setActivatorNodeRef}
{...listeners}
/>
)
}
