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數據邏輯 

<Button type="primary" onClick={() => {
     if (type == 'slide') {
         // 區域選擇
         // 數據體
         let obj = {}
         // 表頭集合
         let headerList = []
         // 第一列集合
         let firstRow = []
         for (let i = minDataIndexs; i <= maxDataIndexs; i++) {
             obj[data['數據集'][i]] = []
             if(firstRow.indexOf(data['數據集'][i]) == -1){
                 firstRow.push(data['數據集'][i])
             }
             for (let j = minItemIndexs; j <= maxItemIndexs; j++) {
                 let dataObj = {}
                 dataObj[header[j].name] = data[header[j].name][i]
                 if(headerList.indexOf(header[j].name) == -1){
                     headerList.push(header[j].name)
                 }
                 obj[data['數據集'][i]].push(dataObj)
             }
         }
         console.log(firstRow);
         console.log(headerList);
         console.log(obj);
     } else if (type == 'row') {
         // 幾行選中
         let obj = {}
         let headerList = []
         let firstRow = []
         rowIndexList.map(item => {
             obj[data['數據集'][item]] = []
             firstRow.push(data['數據集'][item])
             header.map((headerItem, headerIndex) => {
                 if (headerIndex != 0) {
                     let dataObj = {}
                     if(headerList.indexOf(headerItem.name) == -1){
                         headerList.push(headerItem.name)
                     }
                     dataObj[headerItem.name] = data[headerItem.name][item]
                     obj[data['數據集'][item]].push(dataObj)
                 }
             })
         })
         console.log(firstRow);
         console.log(headerList);
         console.log(obj);
     } else if (type == 'column') {
         // 幾列選中
         let headerList = []
         let firstRow = []
         let obj = {}
         data['數據集'].map((item, index) => {
             obj[item] = []
             firstRow.push(item)
             columnIndexList.map(i => {
                 let dataObj = {}
                 if(headerList.indexOf(header[i].name) == -1){
                     headerList.push(header[i].name)
                 }
                 dataObj[header[i].name] = data[header[i].name][index]
                 obj[item].push(dataObj)
             })
         })
         console.log(firstRow);
         console.log(headerList);
         console.log(obj);
     }

 }}>確定</Button>

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 (
        <div>
            <div style={{ marginLeft: 200 }}>
                <div style={{ display: 'flex' }}>
                    <Button type="primary" onClick={() => {
                        if (type == 'slide') {
                            // 區域選擇
                            let obj = {}
                            let headerList = []
                            let firstRow = []
                            for (let i = minDataIndexs; i <= maxDataIndexs; i++) {
                                obj[data['數據集'][i]] = []
                                if(firstRow.indexOf(data['數據集'][i]) == -1){
                                    firstRow.push(data['數據集'][i])
                                }
                                for (let j = minItemIndexs; j <= maxItemIndexs; j++) {
                                    let dataObj = {}
                                    dataObj[header[j].name] = data[header[j].name][i]
                                    if(headerList.indexOf(header[j].name) == -1){
                                        headerList.push(header[j].name)
                                    }
                                    obj[data['數據集'][i]].push(dataObj)
                                }
                            }
                            console.log(firstRow);
                            console.log(headerList);
                            console.log(obj);
                        } else if (type == 'row') {
                            // 幾行選中
                            let obj = {}
                            let headerList = []
                            let firstRow = []
                            rowIndexList.map(item => {
                                obj[data['數據集'][item]] = []
                                firstRow.push(data['數據集'][item])
                                header.map((headerItem, headerIndex) => {
                                    if (headerIndex != 0) {
                                        let dataObj = {}
                                        if(headerList.indexOf(headerItem.name) == -1){
                                            headerList.push(headerItem.name)
                                        }
                                        dataObj[headerItem.name] = data[headerItem.name][item]
                                        obj[data['數據集'][item]].push(dataObj)
                                    }
                                })
                            })
                            console.log(firstRow);
                            console.log(headerList);
                            console.log(obj);
                        } else if (type == 'column') {
                            // 幾列選中
                            let headerList = []
                            let firstRow = []
                            let obj = {}
                            data['數據集'].map((item, index) => {
                                obj[item] = []
                                firstRow.push(item)
                                columnIndexList.map(i => {
                                    let dataObj = {}
                                    if(headerList.indexOf(header[i].name) == -1){
                                        headerList.push(header[i].name)
                                    }
                                    dataObj[header[i].name] = data[header[i].name][index]
                                    obj[item].push(dataObj)
                                })
                            })
                            console.log(firstRow);
                            console.log(headerList);
                            console.log(obj);
                        }

                    }}>確定</Button>
                    {/* <Button type="primary" danger onClick={()=>{
                        setStartItemIndex(-1)
                        setRowIndexList([])
                        setColumnIndexList([])
                        setType('')
                    }}>重置</Button> */}
                </div>

                <div style={{ display: 'flex', textAlign: "center" }}>
                    {
                        header.map((item, index) => {
                            return <div style={{ minWidth: 100, border: "1px solid #ccc" }} onClick={() => {
                                setType('column')
                                setRowIndexList([])
                                if (columnIndexList.indexOf(index) != -1) {
                                    let obj = [...columnIndexList]
                                    obj.deleteElementByValue(index)
                                    setColumnIndexList(obj)
                                } else {
                                    let obj = [...columnIndexList]
                                    obj.push(index)
                                    setColumnIndexList(obj)
                                }
                            }}>{item.name}</div>
                        })
                    }
                </div>
                <div style={{ display: 'flex', textAlign: "center" }}>
                    {
                        header.map((item, itemIndex) => {
                            return <div>
                                {
                                    data[item.name].map((data, dataIndex) => {
                                        return <div onClick={() => {
                                            // 區間選取
                                            if (itemIndex != 0) {
                                                setType('slide')
                                                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)
                                                }
                                            }
                                        }} 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)
                                                }
                                            }

                                        }} style={{
                                            minWidth: 100, border: "1px solid #ccc",
                                            backgroundColor: type == 'slide' ?
                                                (itemIndex >= minItemIndexs && itemIndex <= maxItemIndexs) && (dataIndex >= minDataIndexs && dataIndex <= maxDataIndexs) ? 'pink' : '' :
                                                type == 'row' ? rowIndexList.indexOf(dataIndex) != -1 ? 'pink' : '' :
                                                    type == 'column' ? columnIndexList.indexOf(itemIndex) != -1 ? 'pink' : '' : ''
                                        }}>{data}</div>
                                    })
                                }
                            </div>
                        })
                    }
                </div>
            </div>
        </div>
    )
}

export default Index

以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。

推薦閱讀: