React 基于Ant Degisn 实现table表格列表拖拽排序

这篇具有很好参考价值的文章主要介绍了React 基于Ant Degisn 实现table表格列表拖拽排序。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

效果图:

React 基于Ant Degisn 实现table表格列表拖拽排序,react.js,前端,前端框架

 代码:文章来源地址https://www.toymoban.com/news/detail-801162.html

myRow.js

import { MenuOutlined } from '@ant-design/icons';
import { DndContext } from '@dnd-kit/core';
import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
import {
    arrayMove,
    SortableContext,
    useSortable,
    verticalListSortingStrategy,
} from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import React, { useState } from 'react';
const myRow = ({ children, ...props }) => {
    const {
        attributes,
        listeners,
        setNodeRef,
        setActivatorNodeRef,
        transform,
        transition,
        isDragging,
    } = useSortable({
        id: props['data-row-key'],
    });
    const style = {
        ...props.style,
        transform: CSS.Transform.toString(
            transform && {
                ...transform,
                scaleY: 1,
            },
        ),
        transition,
        ...(isDragging
            ? {
                position: 'relative',
                zIndex: 1,
            }
            : {}),
    };
    return (
        <tr {...props} ref={setNodeRef} style={style} {...attributes}>
            {React.Children.map(children, (child) => {
                if (child.key === 'sort') {
                    return React.cloneElement(child, {
                        children: (
                            <MenuOutlined
                                ref={setActivatorNodeRef}
                                style={{
                                    touchAction: 'none',
                                    cursor: 'move',
                                }}
                                {...listeners}
                            />
                        ),
                    });
                }
                return child;
            })}
        </tr>
    );
};

export default myRow;

index.js

import myRow from './myRow';

export default () => {
    
    const [tableDatasource, setTableDatasource] = useState([]);

    

    const tableColumns = [
        {
            key: 'sort',
            width: 20
        },
        {
            title: '印章类型名称',
            dataIndex: 'yzTypeName',
            key: 'yzTypeName',
            width: 150,
        },
        {
            title: '操作人',
            dataIndex: 'operator',
            key: 'operator',
            width: 150,
        },
        {
            title: '操作时间',
            dataIndex: 'operateDate',
            key: 'operateDate',
            width: 150,
        },
        {
            title: "操作",
            key: "action",
            width: 100,
            render: (text, record, index) => {
                return (
                    <Space size="middle">
                        <a onClick={event => {
                            tableUpdateAction(record);
                        }}>修改</a>
                        <Popconfirm
                            title="删除印章类别"
                            description="确定要删除吗?"
                            onConfirm={tableDeleteAction.bind(this, record)}
                            onCancel={tableCancelDeleteAction}
                            okText="删除"
                            cancelText="取消"
                        >
                            <a>删除</a>
                        </Popconfirm>
                    </Space>
                )
            }
        }
    ];

//注在后端返回的每个对象中,新增一个key 属性 
    useEffect(() => {
        getYzTypeList(screeningDate).then((res) => {
            if (res.code === 200) {
                const updatedList = res.data.list.map((item, index) => ({
                    ...item,
                    key: index + 1,
                }));
                setTableDatasource(updatedList);
                setMyTotal(res.data.total);
                // message.success("印章类型管理 - 数据已更新");
            }
        });
    }, [screeningDate]);
   

  
    const onDragEnd = ({active, over}) => {
        if (active.id !== over?.id) {
            setTableDatasource((previous) => {
                const activeIndex = previous.findIndex((i) => i.key === active.id);
                const overIndex = previous.findIndex((i) => i.key === over?.id);
                return arrayMove(previous, activeIndex, overIndex);
            });
            const activeId = active.id;
            const overId = over?.id;
            // 在 datasource 中找到匹配 activeId 和 overId 的项
            const activeItem = tableDatasource.find(item => item.key === activeId);
            const overItem = tableDatasource.find(item => item.key === overId);
        }
    };


    return (
        <div>
        
            <div style={{marginTop: 10}}>
                <DndContext modifiers={[restrictToVerticalAxis]} onDragEnd={onDragEnd}>
                    <SortableContext
                        items={tableDatasource.map((i) => i.key)}
                        strategy={verticalListSortingStrategy}
                    >
                <Table
                    components={{
                        body: {
                            row: myRow,
                        },
                    }}
                    rowKey="key"
                    columns={tableColumns} dataSource={tableDatasource} size={"middle"}
                       pagination={false}/>
                    </SortableContext>
                </DndContext>
            
            </div>
     
        </div>
    );
};

到了这里,关于React 基于Ant Degisn 实现table表格列表拖拽排序的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3+element plus+sortablejs实现table列表拖拽

    1、安装 2、引入 3、使用 表格表头必须加 row-key ,否则会出现排序错乱 完整代码 table.vue

    2024年02月07日
    浏览(48)
  • element ui el-table sorttable实现表格拖拽排序(vuedraggable)

    如果已经安装了 vuedraggable ,则可以不用安装 sortablejs

    2024年02月11日
    浏览(42)
  • [ant-design-vue] table组件列宽拖拽功能

    原有的样式文件没有使用的必要,个人添加的部分样式内容就符合需求了 vue3.x对应的ant-design-vue中的table组件本身支持列宽的拖动了,不需求额外的包的支持,根据Api说明设置resizeColumn即可

    2024年01月23日
    浏览(49)
  • ant vue table表格数据动态合并

    antd 表格动态行合并 合并效果 步骤方法 1.在computed节点下动态计算每次要合并的行数 2.在methods节点下定义合并单元格的方法 3.如果是一次性获取所有数据进行分页的话,计算columns的时候需要进行修改一下 参考文章:ant design vue 动态表格合并 合并效果 如果我们想要实现名称

    2024年02月10日
    浏览(44)
  • 随手记:使用sortable.js 实现element-ui el-table 表格上下拖拽排序

    需求场景: 表格可以实现上下拖拽row实现新排序 首先,安装sortable.js  引入表格排  全局挂在组件 使用页面引入 使用sortable.js表格一定要有唯一的row-key,一般绑定的是id,不然拖拽会不生效 data声明 sortableContainer: null,为的是后面如果有需要可以做销毁操作   因为我这里是表

    2024年02月22日
    浏览(53)
  • ant-table组件表格数据做合计行,并固定在表格底部

    某些时候,我们表格展示数值型数据的时候,可能会想做一个合计处理,这样能直观的了解到当前列的总计数据信息。 遍观 Table组件 ,官方是没有提供这个功能的,这就需要我们自己处理了 根据表格的特性,合计行作为当前表格的多余一行,需要处理当前页的数据、条数(

    2024年02月09日
    浏览(49)
  • Ant Design Vue表格(Table)及分页(Pagination )使用

    最近在写一个新项目,UI框架用的是 Ant Design Vue ,因为之前一直用的 Element UI ,没有用过这个组件库,没想到二者区别这么大,因此踩了不少坑,其中就有 Table 和 Pagination ,花了一会时间才弄明白,在此记录并分享一下此次经历。 注意:是 Vue3 项目。 Table 的使用相对比较简

    2024年02月10日
    浏览(43)
  • react ant table 根据接口动态渲染表头

    使request获取list,renderFormItem回调里面第二个参数中就有request的返回值,根据这个去渲染就可以了

    2024年02月16日
    浏览(41)
  • ant-design-vue表格Table行内新增、编辑、删除

    ant-design-vue表格Table进行单元格内新增、编辑、删除等操作 如图所示:

    2024年02月14日
    浏览(42)
  • Ant Design Vue Table 嵌套子表格的数据刷新方法

    父子组件各自负责,在table中嵌套了子表格后,首次加载表格时,父组件会实例化子组件并传递参数,折叠后再次展开时,只会传递参数,子组件的数据刷新就属于子表格了。如 @@@code template #expandedRowRender=\\\"{ record }\\\" originIndex style= \\\"margin-left: 55px; margin-right: 50px; background-color:

    2024年02月09日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包