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。
推薦閱讀:
- react中useState使用:如何實現在當前表格直接更改數據
- react實現動態選擇框
- react實現動態表單
- react使用useState修改對象或者數組的值無法改變視圖的問題
- react中使用usestate踩坑及解決