溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“React怎么實(shí)現(xiàn)表格選取”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“React怎么實(shí)現(xiàn)表格選取”文章能幫助大家解決問(wèn)題。
1.獲取選中區(qū)域的數(shù)據(jù)
2.選擇的方向是任意的
3.支持幾行 / 幾列的選取
4.通過(guò)生產(chǎn)JSON給后臺(tái)進(jìn)行交互
5.標(biāo)記出表頭和第一行的數(shù)據(jù)
2.1區(qū)域選擇
onClick={() => {
// 區(qū)間選取
if (itemIndex != 0) {
setType('slide')
/**
第一個(gè)點(diǎn)擊的時(shí)候，打開(kāi)鼠標(biāo)移動(dòng)的邏輯
區(qū)間選取的時(shí)候，要標(biāo)記第一次選中點(diǎn)的（x,y）坐標(biāo)。
同時(shí)初始化x,y的最小最大值。
**/
if(isStart == 0){
setIsStart(1)
setStartItemIndex(itemIndex)
setStartDataIndex(dataIndex)
setMaxItemIndexs(itemIndex)
setMaxDataIndexs(dataIndex)
setMinItemIndexs(itemIndex)
setMinDataIndexs(dataIndex)
}else {
//第二次點(diǎn)擊的時(shí)候，關(guān)閉鼠標(biāo)移動(dòng)的邏輯
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鼠標(biāo)移動(dòng)效果
onMouseOver={() => {
if (isStart) {
if(itemIndex!= 0 ){
//比較當(dāng)前值跟第一次點(diǎn)擊值的大小，隨時(shí)調(diào)整最大值和最小值。從而達(dá)到選中區(qū)域的效果
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生產(chǎn)JSON數(shù)據(jù)邏輯
<Button type="primary" onClick={() => {
if (type == 'slide') {
// 區(qū)域選擇
// 數(shù)據(jù)體
let obj = {}
// 表頭集合
let headerList = []
// 第一列集合
let firstRow = []
for (let i = minDataIndexs; i <= maxDataIndexs; i++) {
obj[data['數(shù)據(jù)集'][i]] = []
if(firstRow.indexOf(data['數(shù)據(jù)集'][i]) == -1){
firstRow.push(data['數(shù)據(jù)集'][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['數(shù)據(jù)集'][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['數(shù)據(jù)集'][item]] = []
firstRow.push(data['數(shù)據(jù)集'][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['數(shù)據(jù)集'][item]].push(dataObj)
}
})
})
console.log(firstRow);
console.log(headerList);
console.log(obj);
} else if (type == 'column') {
// 幾列選中
let headerList = []
let firstRow = []
let obj = {}
data['數(shù)據(jù)集'].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>import { Button } from 'antd';
import React, { useState } from 'react';
function Index(params) {
// 刪除數(shù)組中第一個(gè)匹配的元素，成功則返回位置索引，失敗則返回 -1。
Array.prototype.deleteElementByValue = function (varElement) {
var numDeleteIndex = -1;
for (var i = 0; i < this.length; i++) {
// 嚴(yán)格比較，即類型與數(shù)值必須同時(shí)相等。
if (this[i] === varElement) {
this.splice(i, 1);
numDeleteIndex = i;
break;
}
}
return numDeleteIndex;
}
// 表頭
const [header, setHeader] = useState([
{
name: "數(shù)據(jù)集",
},
{
name: '19春支付金額',
},
{
name: '20春支付金額',
},
{
name: '21春支付金額',
},
{
name: '19春支付人數(shù)',
},
{
name: '20春支付人數(shù)',
},
{
name: '21春支付人數(shù)',
}
])
// 數(shù)據(jù)
const [data, setData] = useState({
'數(shù)據(jù)集': ['連衣裙', '褲子', '襯衫', '短袖', '長(zhǎng)袖', '短褲', '羽絨服', '棉毛褲'],
'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春支付人數(shù)': [1000, 500, 1000, 500, 1000, 500, 1000, 500],
'20春支付人數(shù)': [1200, 520, 1200, 520, 1200, 520, 1200, 520],
'21春支付人數(shù)': [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)
// 行下標(biāo)
const [rowIndexList, setRowIndexList] = useState([])
// 列下標(biāo)
const [columnIndexList, setColumnIndexList] = useState([])
return (
<div>
<div style={{ marginLeft: 200 }}>
<div style={{ display: 'flex' }}>
<Button type="primary" onClick={() => {
if (type == 'slide') {
// 區(qū)域選擇
let obj = {}
let headerList = []
let firstRow = []
for (let i = minDataIndexs; i <= maxDataIndexs; i++) {
obj[data['數(shù)據(jù)集'][i]] = []
if(firstRow.indexOf(data['數(shù)據(jù)集'][i]) == -1){
firstRow.push(data['數(shù)據(jù)集'][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['數(shù)據(jù)集'][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['數(shù)據(jù)集'][item]] = []
firstRow.push(data['數(shù)據(jù)集'][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['數(shù)據(jù)集'][item]].push(dataObj)
}
})
})
console.log(firstRow);
console.log(headerList);
console.log(obj);
} else if (type == 'column') {
// 幾列選中
let headerList = []
let firstRow = []
let obj = {}
data['數(shù)據(jù)集'].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={() => {
// 區(qū)間選取
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關(guān)于“React怎么實(shí)現(xiàn)表格選取”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼