您现在的位置是：网站首页> 编程资料编程资料

React实现表格选取_React_

2023-05-24 684人已围观

简介 React实现表格选取_React_

本文实例为大家分享了React实现表格选取的具体代码，供大家参考，具体内容如下

在工作中，遇到一个需求，在表格中实现类似于Excel选中一片区域的，然后拿到选中区域的所有数据。

1.实现需求和效果截图

1.获取选中区域的数据
2.选择的方向是任意的
3.支持几行 / 几列的选取
4.通过生产JSON给后台进行交互
5.标记出表头和第一行的数据

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

2.核心代码解析

2.1区域选择

onClick={() => {      // 区间选取       if (itemIndex != 0) {           setType('slide')           /**           第一个点击的时候，打开鼠标移动的逻辑           区间选取的时候，要标记第一次选中点的（x,y）坐标。           同时初始化x,y的最小最大值。           **/           if(isStart == 0){               setIsStart(1)               setStartItemIndex(itemIndex)               setStartDataIndex(dataIndex)               setMaxItemIndexs(itemIndex)               setMaxDataIndexs(dataIndex)               setMinItemIndexs(itemIndex)               setMinDataIndexs(dataIndex)           }else {                //第二次点击的时候，关闭鼠标移动的逻辑               setIsStart(0)           }       }       // 行选取       if (itemIndex == 0) {           setType('row')           setIsStart(1)           setColumnIndexList([])           if (rowIndexList.indexOf(dataIndex) != -1) {               let obj = [...rowIndexList]               obj.deleteElementByValue(dataIndex)               setRowIndexList(obj)           } else {               let obj = [...rowIndexList]               obj.push(dataIndex)               setRowIndexList(obj)           }       }   }}

2.2鼠标移动效果

onMouseOver={() => {      if (isStart) {          if(itemIndex!= 0 ){               //比较当前值跟第一次点击值的大小，随时调整最大值和最小值。从而达到选中区域的效果              if (itemIndex > startItemIndex) {                  setMinItemIndexs(startItemIndex)                  setMaxItemIndexs(itemIndex)              } else {                  setMaxItemIndexs(startItemIndex)                  setMinItemIndexs(itemIndex)              }          }          if (dataIndex > startDataIndex) {              setMinDataIndexs(startDataIndex)              setMaxDataIndexs(dataIndex)          }          else {              setMaxDataIndexs(startDataIndex)              setMinDataIndexs(dataIndex)          }      }  }}

2.3生产JSON数据逻辑 

3.完成代码

import { Button } from 'antd'; import React, { useState } from 'react'; function Index(params) {     // 删除数组中第一个匹配的元素，成功则返回位置索引，失败则返回 -1。     Array.prototype.deleteElementByValue = function (varElement) {         var numDeleteIndex = -1;         for (var i = 0; i < this.length; i++) {             // 严格比较，即类型与数值必须同时相等。             if (this[i] === varElement) {                 this.splice(i, 1);                 numDeleteIndex = i;                 break;             }         }         return numDeleteIndex;     }     // 表头     const [header, setHeader] = useState([         {             name: "数据集",         },         {             name: '19春支付金额',         },         {             name: '20春支付金额',         },         {             name: '21春支付金额',         },         {             name: '19春支付人数',         },         {             name: '20春支付人数',         },         {             name: '21春支付人数',         }     ])     // 数据     const [data, setData] = useState({         '数据集': ['连衣裙', '裤子', '衬衫', '短袖', '长袖', '短裤', '羽绒服', '棉毛裤'],         '19春支付金额': [10000, 5000, 10000, 5000, 10000, 5000, 10000, 5000],         '20春支付金额': [12000, 5200, 12000, 5200, 12000, 5200, 12000, 5200],         '21春支付金额': [14000, 5400, 14000, 5400, 14000, 5400, 14000, 5400],         '19春支付人数': [1000, 500, 1000, 500, 1000, 500, 1000, 500],         '20春支付人数': [1200, 520, 1200, 520, 1200, 520, 1200, 520],         '21春支付人数': [1400, 540, 1400, 540, 1400, 540, 1400, 540],     })     //      const [isStart, setIsStart] = useState(0)     // 类型     const [type, setType] = useState('')     // // 起始     const [startItemIndex, setStartItemIndex] = useState(-1)     const [startDataIndex, setStartDataIndex] = useState(-1)     // 小     const [minItemIndexs, setMinItemIndexs] = useState(-1)     const [minDataIndexs, setMinDataIndexs] = useState(-1)     // 大     const [maxItemIndexs, setMaxItemIndexs] = useState(-1)     const [maxDataIndexs, setMaxDataIndexs] = useState(-1)     // 行下标     const [rowIndexList, setRowIndexList] = useState([])     // 列下标     const [columnIndexList, setColumnIndexList] = useState([])     return (         
             
                 
                     

        

        

            
相关内容

            
        

    

    

        

            
点击排行

            
        

        

            
本栏推荐

            
        


        

            
猜你喜欢
-六神源码网