ant design table实现上下行拖拽功能(类组件)

Posted on by hackdl

前言

最好的种树是十年前,其次是现在。歌谣 每天一个前端小知识 提醒你改好好学习了 知乎博主 csdn博主 b站博主 放弃很容易但是坚持一定很酷 我是歌谣 喜欢就一键三连咯 你得点赞是对歌谣最大的鼓励 微信公众号关注前端小歌谣

起始

首先刚开始知道要书写一个这样的功能我的内心是比较崩溃的 完全没有思路
然后就打开官网的文档进行观看

开始

一开始准备写 打开官网的一个文档是4.0的 看起来也是一脸的蒙蔽
接着找到3的一个文档

代码部分

import { Table } from 'antd';
import { DndProvider, DragSource, DropTarget } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import update from 'immutability-helper';
 
let dragingIndex = -1;
 
class BodyRow extends React.Component {
  render() {
    const { isOver, connectDragSource, connectDropTarget, moveRow, ...restProps } = this.props;
    const style = { ...restProps.style, cursor: 'move' };
 
    let { className } = restProps;
    if (isOver) {
      if (restProps.index > dragingIndex) {
        className += ' drop-over-downward';
      }
      if (restProps.index ),
    );
  }
}
 
const rowSource = {
  beginDrag(props) {
    dragingIndex = props.index;
    return {
      index: props.index,
    };
  },
};
 
const rowTarget = {
  drop(props, monitor) {
    const dragIndex = monitor.getItem().index;
    const hoverIndex = props.index;
 
    // Don't replace items with themselves
    if (dragIndex === hoverIndex) {
      return;
    }
 
    // Time to actually perform the action
    props.moveRow(dragIndex, hoverIndex);
 
    // Note: we're mutating the monitor item here!
    // Generally it's better to avoid mutations,
    // but it's good here for the sake of performance
    // to avoid expensive index searches.
    monitor.getItem().index = hoverIndex;
  },
};
 
const DragableBodyRow = DropTarget('row', rowTarget, (connect, monitor) => ({
  connectDropTarget: connect.dropTarget(),
  isOver: monitor.isOver(),
}))(
  DragSource('row', rowSource, connect => ({
    connectDragSource: connect.dragSource(),
  }))(BodyRow),
);
 
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
];
 
class DragSortingTable extends React.Component {
  state = {
    data: [
      {
        key: '1',
        name: 'John Brown',
        age: 32,
        address: 'New York No. 1 Lake Park',
      },
      {
        key: '2',
        name: 'Jim Green',
        age: 42,
        address: 'London No. 1 Lake Park',
      },
      {
        key: '3',
        name: 'Joe Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
      },
    ],
  };
 
  components = {
    body: {
      row: DragableBodyRow,
    },
  };
 
  moveRow = (dragIndex, hoverIndex) => {
    const { data } = this.state;
    const dragRow = data[dragIndex];
 
    this.setState(
      update(this.state, {
        data: {
          $splice: [[dragIndex, 1], [hoverIndex, 0, dragRow]],
        },
      }),
    );
  };
 
  render() {
    return (
      
         ({
            index,
            moveRow: this.moveRow,
          })}
        />
      
    );
  }
}
 
ReactDOM.render(, mountNode);
#components-table-demo-drag-sorting tr.drop-over-downward td {
  border-bottom: 2px dashed #1890ff;
}
 
#components-table-demo-drag-sorting tr.drop-over-upward td {
  border-top: 2px dashed #1890ff;
}

这是官网的示例 那么我们如何实现呢
第一步


第一步 引入第一个类





第二步
找准数据
第三步


进行数据的一个赋值我这边是dva.js赋值




第四步
回调或者确定按钮处理数据（这边是确定按钮处理值然后调接口）
实现效果
拖拽后
总结
人生本是一场修行 且行且珍惜


            
            
            

        

        
    
                        
  • 
                
                    
                    赞
                
            
    • 
            
  • 
                
                    
                    收藏
                
            
    • 
            
  • 
                
                    
                    评论
                
            
    • 
            
                            
  • 
                    
                        
                        举报
                    
                
    • 
                    

    

                    
上一篇：前端小知识点扫盲笔记记录8

                    


    

    

        

            
                
            
        

        

            

                提问和评论都可以，用心的回复会被更多人看到
                评论
            

            

                

                    
                

                

                    发布评论
                

            

        

    

    
    

        



        

            相关文章
        

        
    
                            
  • 
                    
    
                        
                            
    Ant Design of Vue 之 实现table表格组件实现隔行变色
    
                            
     ###背景 项目中需要基于ant vue 组件库 实现table 表格的隔行变色，具体如图。 具体实现 1.主要是通过/deep/实现，/deep/主要的运用的场景是在调用别人的组件时，想要修改部分的样式，但又不想影响组件在其他地方的使用。/deep/也可以替换成>>>。 /deep/ .ant-t ...
    
                        
                        
                                                    
    
                                                                    
                                         类目                                    
                                                                    
                                         隔行变色                                    
                                                                    
                                         css样式                                    
                                                            
    
                                                                    
    

                
    • 
                            
  • 
                    
    
                        
                            
    #yyds干货盘点# ant design中 table的表格行的拖拽实现
    
                            
         最好的种树是十年前,其次是现在。歌谣 每天一个前端小知识 提醒你改好好学习了 知乎博主 csdn博主 b站博主  放弃很容易但是坚持一定很酷     我是歌谣 喜欢就一键三连咯 你得点赞是对歌谣最大的鼓励 微信公众号关注小歌谣 前言    首先刚开始知道要书写一个这样的功能我的内心是比较崩溃的 完全没有思路  
    
                        
                        
                                                    
    
                                                                    
                                         官网                                    
                                                                    
                                         ide                                    
                                                                    
                                         数据                                    
                                                            
    
                                                                    
    

                
    • 
                            
  • 
                    
    
                        
                            
    Ant Design编辑表格(类组件)
    
                            
     Ant Design官网编辑表格--类组件写法import React,{Component} from "react";import ReactDOM from "react-dom";import "antd/dist/antd.css";import { Table, Input, Button, Popconfirm, Form } from "antd";const Edita
    
                        
                        
                                                    
    
                                                                    
                                         Ant Design                                    
                                                                    
                                         类组件                                    
                                                            
    
                                                                    
    

                
    • 
                            
  • 
                    
    
                        
                            
    ant design  table    隐藏表头
    
                            
     在 columns 中定义表头样式 因为设置 样式 display 为 none 会导致页面元素塌陷 所以想了下面的方法 把 title 去掉 width 宽度置为 0 达到所要的效果 { title: policyNoTypeToTable == '0'? '支付方式' : '', // 根据特定 ...
    
                        
                        
                                                    
    
                                                                    
                                         赋值                                    
                                                                    
                                         其他                                    
                                                            
    
                                                                    
    

                
    • 
                            
  • 
                    
    
                        
                            
    ant design vue table 排序
    
                            
     背景：官方和网上的例子都很简单，实际项目开发中比较的一般都是对象数组，且属性值不一定全为数值，有可能为字符串,比如某个数据没有值，默认显示字符串："--" 需求：降序或者升序无数值的在最后面显示 开发步骤： (1)HTML：
                                                    <div class="tag-box">
                                                                    <span class="tag-item">
                                         数据                                    </span>
                                                                    <span class="tag-item">
                                         字符串                                    </span>
                                                                    <span class="tag-item">
                                         对象数组                                    </span>
                                                                    <span class="tag-item">
                                         属性值                                    </span>
                                                                    <span class="tag-item">
                                         升序                                    </span>
                                                            </div>
                                                                    </div>

                </li>
                            <li>
                    <div class="about-aticle-list">
                        <a href="https://blog.51cto.com/u_13625527/2433108" data-report-query="xiangguantuijian&06" target="_blank" class="title">
                            <div class="tit">ant design table学习--引入第一个table组件</div>
                            <p> 1.安装create-react-app。创建第一个项目my-app。$npminstallcreate-react-app$create-react-appmy-app$cdmy-app2.安装antd,reqwest。.$npminstallreqwest--save-dev.$npminstallreqwest--save-dev3.修改APP.js文件如下。（一定要引入import'</p>
                        </a>
                        
                                                    <div class="tag-box">
                                                                    <span class="tag-item">
                                         ant design table                                    </span>
                                                            </div>
                                                                    </div>

                </li>
                            <li>
                    <div class="about-aticle-list">
                        <a href="https://blog.51cto.com/u_16065421/6183172" data-report-query="xiangguantuijian&07" target="_blank" class="title">
                            <div class="tit">ant-design-vue Table pagination分页实现</div>
                            <p> 但如果想要与后端配合着写，则需要传入pagination参数来自定义，onShowSizeChange ：只有pageSize 变化才会回调。onChange：页码改变的回调，参数是改变后的页码及每页条数。</p>
                        </a>
                        
                                                    <div class="tag-box">
                                                                    <span class="tag-item">
                                         vue.js                                    </span>
                                                                    <span class="tag-item">
                                         javascript                                    </span>
                                                                    <span class="tag-item">
                                         前端                                    </span>
                                                                    <span class="tag-item">
                                         分页                                    </span>
                                                                    <span class="tag-item">
                                         自定义                                    </span>
                                                            </div>
                                                                    </div>

                </li>
                            <li>
                    <div class="about-aticle-list">
                        <a href="https://blog.51cto.com/u_11666747/5334060" data-report-query="xiangguantuijian&08" target="_blank" class="title">
                            <div class="tit">ant-design-vue Table组件去掉自带分页器</div>
                            <p> <a-table     :columns="columns"    :data-source="data"    :pagination="false" //去除自带分页器    :scroll="{ y: 240 }"  /></p>
                        </a>
                        
                                                    <div class="tag-box">
                                                                    <span class="tag-item">
                                         分页                                    </span>
                                                            </div>
                                                                    </div>

                </li>
                            <li>
                    <div class="about-aticle-list">
                        <a href="https://blog.51cto.com/u_15127666/3470794" data-report-query="xiangguantuijian&09" target="_blank" class="title">
                            <div class="tit">ant-design table 分页（tableProps）</div>
                            <p> 1.布局 2.逻辑 .</p>
                        </a>
                        
                                                    <div class="tag-box">
                                                                    <span class="tag-item">
                                         ant-design                                    </span>
                                                                    <span class="tag-item">
                                         json                                    </span>
                                                                    <span class="tag-item">
                                         分页                                    </span>
                                                                    <span class="tag-item">
                                         干货                                    </span>
                                                            </div>
                                                                    </div>

                </li>
                            <li>
                    <div class="about-aticle-list">
                        <a href="https://blog.51cto.com/u_15127639/4282030" data-report-query="xiangguantuijian&10" target="_blank" class="title">
                            <div class="tit">ant design  table   表格默认选择</div>
                            <p> import React, { useEffect, useState } from " react import ...>
                        
    
                        
                                                    
    
                                                                    
                                         ico                                    
                                                                    
                                         数据                                    
                                                                    
                                         序列号                                    
                                                                    
                                         初始化                                    
                                                                    
                                         数组                                    
                                                            
    
                                                                    
    

                
    • 
                            
  • 
                    
    
                        
                            
    ant design of vue 组件使用
    
                            
     #1、表格 1）分页表格  
    
                        
                        
                                                    
    
                                                                    
                                         Vue                                    
                                                            
    
                                                                    
    

                
    • 
                            
  • 
                    
    
                        
                            
    【Vue】组件ant design of vue
    
                            
     npm install ant-design-vue@2.0.0-rc.3 --save项目引入组件
    
                        
                        
                                                    
    
                                                                    
                                         vue.js                                    
                                                                    
                                         javascript                                    
                                                                    
                                         ecmascript                                    
                                                                    
                                         ico                                    
                                                                    
                                         简单使用                                    
                                                            
    
                                                                    
    

                
    • 
                            
  • 
                    
    
                        
                            
    Ant Design of Vue 之table表格实现头部自定图标
    
                            
     背景 vue项目要基于ant vue 组件库，实现如下如效果。 实现过程 主要通过scopedSlots或者slots配置自定义头部，具体看代码：  
                                                                    
                                         自定义                                    
                                                                    
                                         ico                                    
                                                                    
                                         自定义样式                                    
                                                                    
                                         其他                                    
                                                            
    

    
                                                                    

                
    • 
                            
  • 
                    
    
                        
                            
    ant-design-pro Login 组件 实现 rules 验证
    
                            
     1.引入组件 2.调用(验证) 3.效果图
    
                        
                        
                                                    
    
                                                                    
                                         ant-design                                    
                                                                    
                                         用户名                                    
                                                                    
                                         干货                                    
                                                            
    
                                                                    
    

                
    • 
                            
  • 
                    
    
                        
                            
    前端项目实战181-ant design table实现横向排布
    
                            
     前端
    
                        
                        
                                                    
    
                                                                    
                                         前端                                    
                                                                    
                                         javascript                                    
                                                                    
                                         开发语言                                    
                                                                    
                                         Source                                    
                                                                    
                                         Data                                    
                                                            
    
                                                                    
    

                
    • 
                            
  • 
                    
    
                        
                            
    ant design 树形组件怎么使用
    
                            
     getDefaultProps doesn't work with ES6 syntax; warning is not helpful 解决后： 参考地址：https://github.com/facebook/react-native/issues/1772
    
                        
                        
                                                    
    
                                                                    
                                         facebook                                    
                                                                    
                                         github                                    
                                                            
    
                                                                    
    

                
    • 
                            
  • 
                    
    
                        
                            
    Ant Design Vue list表格组件
    
                            
     文章目录1.案例部分代码2. 简述3.案例代码1.案例部分代码 
                        
    
                        
                                                    
    
                                                                    
                                         表格组件                                    
                                                                    
                                         分页                                    
                                                                    
                                         当前页                                    
                                                                    
                                         加载                                    
                                                            
    
                                                                    
    

                
    • 
                            
  • 
                    
    
                        
                            
    sortablejs实现table拖拽
    
                            
     1.安装sortablejsnpm install sortablejs --save-dev-或yarn add sortable -D2.调用const tbody = document.querySelector('.ant-table-tbody');const _this = this;this.sort = Sortable.create(tbody, {    filter: '.
    
                        
                        
                                                    
    
                                                                    
                                         javascript                                    
                                                                    
                                         vue.js                                    
                                                                    
                                         html5                                    
                                                            
    
                                                                    
    

                
    • 
                            
  • 
                    
    
                        
                            
    使用插槽实现ant table的基础功能
    
                            
     子组件，表格 
    

    

    •

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.e1idc.net

服务器托管，北京服务器托管，服务器租用，机房机柜带宽租用

服务器托管

咨询：董先生

电话13051898268 QQ/微信93663045！

上一篇:
下一篇: