react 实现表格列表拖拽排序的示例

目录
  • 问题描述
  • 思路
  • 解析
    • 1. react-sortable-hoc
    • 2. array-move

问题描述

在项目开发中,遇到这样一个需求:需要对表格里面的数据进行拖拽排序。

效果图如下所示:

思路

安装两个插件:

  • react-sortable-hoc (或者 react-beautiful-dnd)
  • array-move
npm install --save react-sortable-hoc
npm install --save array-move

解析

1. react-sortable-hoc

react-sortable-hoc 是一组 react 高阶组件(参数或返回值为函数),用于实现拖动排序功能,可以将任何列表转换为动画,可访问和触摸友好的可排序列表。可以和现有组件集成,支持拖动手柄、自动滚动、锁定轴和操作事件等功能,有着流程的动画效果。可水平、垂直拖动。

react-sortable-hoc 的使用:

react-sortable-hoc 提供了两个特别重要的API

  • SortableContainer :是所有可拖拽排序元素的容器
  • SortableElement :是每个要拖拽排序元素的容器
  • SortableHandle :是定义拖拽手柄的容器
import { SortableHandle } from 'react-sortable-hoc';
import { MenuOutlined } from '@ant-design/icons';

const DragHandle = SortableHandle(() => <MenuOutlined style={{ cursor: 'grab', color: '#999' }} />)

{
            title: '拖动排序',
            dataIndex: 'sort',
            width: 120,
            align: 'center',
            className: 'drag-visible',
            editable: false,
            render: () =>{
                if (editable) return <DragHandle />;
                return <span>禁止拖动</span>
            },
        },

SortableHandle 就是指下面的箭头部分

SortableElement 提供了一个 index 属性来进行对每个要拖拽元素的排序

SortableContainer 提供一个方法 onSortEnd,这个方法可以解构两个形参:{ oldIndex , newIndex },一个是拖拽元素的标记,一个是将要放的地方的标记。

最后在使用 arrayMoveImmutable 交换数组的位置。

axis 表示拖拽的方向,x 是水平拖拽,y 是垂直拖拽,默认是垂直拖拽

2. array-move

array-move 其实就是一个 API,它的主要作用是用来交换数组中元素的位置。

看下面的实例:

// 在tsx文件中
import React, { useEffect } from 'react';
import { arrayMoveImmutable } from 'array-move';

const Index = () => {
	useEffect(() => {
		let arr = ['a', 'b', 'c']
		let result = arrayMoveImmutable(arr, 1 , 2)
		console.log(result)
		// 结果输入为: [ 'a', 'c', 'b' ]
	})
}

export default Index

使用

import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
import { arrayMoveImmutable } from 'array-move';

// 定义拖拽的table 容器
const DragTableContainer = SortableContainer((props) => <tbody {...props}>)

// 定义 拖拽的 行
const DragTableItem = SortableElement((props) => <tr {...props}>)

// 定义拖拽手柄
const DragHandle = SortableHandle(() => (
	<MenuOutlined title='拖拽排序' />
))

// 表格排序方法
const onSortEnd = ({oldIndex, newIndex}: {oldIndex: number; newIndex: number }) => {
        if (oldIndex !== newIndex) {
            const newData: any[] = arrayMoveImmutable(([] as any[]).concat(dataSource), oldIndex, newIndex).filter((el: any) => !!el);
            handleAllSave(newData) // 父组件传过来的方法,用于更新表格第一列的序号
        }
    }

// 所有可拖拽排序元素的容器
// DragTableContainer 是上面通过 SortableContainer 定义的拖拽的table 容器
// useDragHandle  参数,意思是: 使用行把手拖拽行排序
// disableAutoscroll 参数,禁止自动滚动
// helperClass 参数,可修改拖拽样式
// onSortEnd   `SortableContainer` 提供的一个方法,这个方法可以解构两个形参:`{ oldIndex ,  newIndex }`,一个是拖拽元素的标记,一个是将要放的地方的标记,用于表格拖拽排序

const DraggableContainer = (props: any) => <DragTableContainer useDragHandle disableAutoscroll helperClass="row-dragging" onSortEnd={onSortEnd} {...props}/>

// 定义 拖拽的 行

// DraggableBodyRow  返回的是由 SortableItem  包裹的每一行元素

const DraggableBodyRow = ({ className, style, ...restProps}: any) => {
    const index = dataSource.findIndex((x: any) => x.orderNum === restProps['data-row-key']);
    return (<SortableItem index={index} {...restProps} />)
}

// ----------------------------------------------------------------------------------------
// ----------------------------------------------------------------------------------------

// 封装的子组件
const EditableTable = (props: any) => {
    let { title = '', subtitle = '',  columns, rowClassName = () => 'editable-row', dataSource, handleSave, handleAllSave,  rowKey, placeholder,  clickRow, loading = false, scroll } = props;
    const styles = {
        tabletitle: { fontWeight: 800, color: '#0095ff', fontSize: '16px' },
        subtitle: { color: '#000000', fontSize: '12px' },
    };

    columns = columns.map((col: any) => {
        if (!col.editable) {
            return col;
        }
        return {
            ...col,
            onCell: (record: any) => ({
                record,
                isRowDisable: col.isRowDisable,
                isNumber: col.isNumber,
                editable: col.editable,
                editdisable: col.editdisable,
                dataIndex: col.dataIndex,
                title: col.title,
                handleSave: handleSave,
                formRules: col.rules,
                placeholder: col?.placeholder,
                precision: col?.precision,
                min: col?.min,
                step: col?.step,
                max: col?.max,
                formatter: col?.formatter,
                parser: col?.parser,
            }),
        };
    });
    /**
     * 表格行属性
     * @param record 表格每行的数据
     * @returns
     */
    const onRow = (record: any) => {
        return {
            onClick: clickRow ? () => clickRow(record) : undefined,
        }
    }

    const onSortEnd = ({oldIndex, newIndex}: {oldIndex: number; newIndex: number }) => {
        if (oldIndex !== newIndex) {
            const newData: any[] = arrayMoveImmutable(([] as any[]).concat(dataSource), oldIndex, newIndex).filter((el: any) => !!el);
            handleAllSave(newData)
        }
    }

    const DraggableContainer = (props: any) => <SortableBody useDragHandle disableAutoscroll helperClass="row-dragging" onSortEnd={onSortEnd} {...props}/>

    const DraggableBodyRow = ({ className, style, ...restProps}: any) => {
        const index = dataSource.findIndex((x: any) => x.orderNum === restProps['data-row-key']);
        return (<SortableItem index={index} {...restProps} />)
    }

    return (
        <Fragment>
            <div style={{ display: 'flex', marginBottom: '6px' }}>
                <Table
                    className="wrap"
                    style={{ width: '100%' }}
                    locale={{ emptyText: '暂无数据' }}
                    components={{
                        body: {
                            wrapper: DraggableContainer,
                            row: DraggableBodyRow,
                            // cell: EditableCell
                        }
                    }}
                    rowClassName={rowClassName}
                    bordered
                    dataSource={dataSource}
                    columns={columns}
                    pagination={false}
                    rowKey='orderNum'
                    scroll={scroll || { y: 500 }}
                    onRow={onRow}
                    loading={loading}
                />
            </div>
        </Fragment>
    );
};

export default memo(EditableTable);

到此这篇关于react 实现表格列表拖拽排序的示例的文章就介绍到这了,更多相关react 表格列表拖拽排序内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • React实现卡片拖拽效果流程详解

    前提摘要: 学习宋一玮 React 新版本 + 函数组件 &Hooks 优先 开篇就是函数组件+Hooks 实现的效果如下: 学到第11篇了 照葫芦画瓢,不过老师在讲解的过程中没有考虑拖拽目标项边界问题,我稍微处理了下这样就实现拖拽流畅了 下面就是主要的代码了,实现拖拽(src/App.js): 核心在于标记当前项,来源项,目标项,并且在拖拽完成时对数据处理,更新每一组数据(useState): /** @jsxImportSource @emotion/react */ // 上面代码是使用e

  • react拖拽组件react-sortable-hoc的使用

    目录 1.文件1 2.文件2 3.使用 使用react-sortable-hoc实现拖拽 如图: 提示:下面案例可供参考 1.文件1 代码如下(示例):文件名称:./dragcomponents import * as React from 'react' import { sortableContainer, sortableElement, sortableHandle, } from "react-sortable-hoc"; // 拖拽的关键组件 const Sortable:

  • React结合Drag API实现拖拽示例详解

    目录 认识拖拽 被拖拽元素 可释放目标 生命周期 拖拽操作中的数据传输 代码实现 如何标记当前拖拽的元素? 在画布中拖动 数据结构 总结 认识拖拽 鼠标拖拽是一个常见的交互场景,在这个熟悉的过程将会发生哪些事件? 拖拽事件指用户通过鼠标(或其他指针设备)将元素移到一个新的位置上.拖拽过程涉及两个对象:被拖拽元素(上图中 A )和可释放目标(上图中 B ) 被拖拽元素 默认情况下,图片.链接和文本是可拖动的.HTML5 在所有 HTML 元素上规定了一个 draggable 属性, 表示元素是否可

  • react 实现表格列表拖拽排序的示例

    目录 问题描述 思路 解析 1. react-sortable-hoc 2. array-move 问题描述 在项目开发中,遇到这样一个需求:需要对表格里面的数据进行拖拽排序. 效果图如下所示: 思路 安装两个插件: react-sortable-hoc (或者 react-beautiful-dnd) array-move npm install --save react-sortable-hoc npm install --save array-move 解析 1. react-sortab

  • vue实现列表拖拽排序的示例代码

    本文主要介绍了vue实现列表拖拽排序的示例代码,具体如下: <template> <div class="test_wrapper" @dragover="dragover($event)"> <transition-group class="transition-wrapper" name="sort"> <div v-for="(item) in dataList&quo

  • Vue+Element树形表格实现拖拽排序示例

    目录 安装sortablejs 在需要的页面引入 表格加上row-key="id" 树形表格排序(树结构) 方法介绍 注意点 结语 今天给大家分享一下树形表格拖拽排序,树形表格排序的教程不多,可能还会有问题,我在这里详细给大家讲解一下,如果你有这样的需求或觉得有用,请给个关注或收藏一下吧,方便后期查看使用. 安装sortablejs npm install sortablejs --save 在需要的页面引入 import Sortable from 'sortablejs' 表格加上

  • vue实现列表拖拽排序的功能

    在日常开发中,特别是管理端,经常会遇到要实现拖拽排序的效果:这里提供一种简单的实现方案. 此例子基于vuecli3 首先,我们先了解一下js原生拖动事件: 在拖动目标上触发事件 (源元素): ondragstart - 用户开始拖动元素时触发 ondrag - 元素正在拖动时触发 ondragend - 用户完成元素拖动后触发 释放目标时触发的事件: ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件 ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触

  • Vue实用功能之实现拖拽元素、列表拖拽排序

    目录 Vue实现拖拽元素.列表拖拽排序 组件使用 补充:排序动画 总结 Vue实现拖拽元素.列表拖拽排序 需求:    1.左右两个容器,左边和右边的元素可以拖动互换    2.列表拖拽排序 组件使用 Vue.Draggable是一款基于Sortable.js实现的vue拖拽插件支持移动设备.拖拽和选择文本.智能滚动,可以在不同列表间拖拽.不依赖jQuery为基础,vue2过渡动画兼容.支持撤销操作,总之是一款非常优秀的vue拖拽组件 npm或yarn安装方式 yarn add vuedragg

  • element表格行列拖拽的实现示例

    element ui 表格没有自带的拖拽排序的功能,只能借助第三方插件Sortablejs来实现,先来看一下动态图,效果是不是你们想要的. 首先需要安装Sortable.js npm install sortablejs --save 然后引用 import Sortable from 'sortablejs' 需要注意的是element table务必指定row-key,row-key必须是唯一的,如ID,不然会出现排序不对的情况. ###示例代码 <template> <div st

  • React.js组件实现拖拽排序组件功能过程解析

    因为使用了react.js技术栈,所以封装优先考虑输入和输出.基于数据驱动去渲染页面.控制拖拽元素的顺序. 由于我不考虑兼容IE8等旧版本浏览器,拖拽的效果采用了HTML5的拖放(Drag 和 drop).当然,如果要求兼容性丰富,使用鼠标点击的相关事件也很简单. 实现的效果如下: 第一步是先了解H5拖放的相关属性,MDN上有详细的说明,链接 有一点需要注意的是,react.js会给所有的属性事件名称前加上"on",后面则为驼峰式写法.例如原生的click事件,在react.js里应使

  • Elementui表格组件+sortablejs实现行拖拽排序的示例代码

    前言 运营小姐姐说想要可以直接拖拽排序的功能,原来在序号六的广告可能会因为金主爸爸加钱换到序号一的位置,拖拽操作就很方便 效果 实现方式 template部分 <el-table v-loading="loading" :default-sort="{prop: 'sortNum', order: 'ascending'}" :data="list" border align="left" > <el-tab

  • sortable+element 实现表格行拖拽的方法示例

    背景 1.vue项目中的表格需要实现行拖拽功能 2.表格使用element组件库中el-table 方案介绍 Sortable.js 介绍:Sortable.js是一款轻量级的拖放排序列表的js插件 引用自官方文档:No jQuery required. Supports Meteor, AngularJS, React, Polymer, Vue, Knockout and any CSS library, e.g. Bootstrap. 参考地址: https://github.com/So

  • antdesign-vue结合sortablejs实现两个table相互拖拽排序功能

    实现效果 本来想在网上看看有没有基于antdesign做的,然后发现是真的少啊!废话不多说,先上图: sortablejs介绍 首先先来认识一下这个插件: sortablejs 大家可以去细读一下它的api文档: 这边我就着重介绍一下我用到的api. 1.group可以传入对象,参数值为name,pull,put, name:如果是要两个列表下进行拖动的话,name的值必须为一样: pull:pull用来定义从这个列表容器移动出去的设置,true/false/'clone'/function t

随机推荐