react

原创已于 2022-04-17 19:34:13 修改 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#reactjs

于 2022-04-10 13:53:06 首次发布

该博客展示了如何在React应用中实现表格的搜索、筛选和操作功能。通过使用Ant Design库，作者创建了一个包含姓名、年龄、地址等列的表格，并实现了列搜索、筛选和批量变更数据的功能。用户可以通过搜索框进行实时搜索，通过筛选按钮过滤数据，还能够通过弹窗进行多选操作，将选择的项添加到表格的特定列中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import React from "react"

import { useContext, useState, useEffect, useRef } from 'react';

import { Table, Input, Button, Popconfirm, Form, InputRef, Tag, Space, Modal } from 'antd';

import Icon, { SearchOutlined } from '@ant-design/icons';

import { FormInstance } from 'antd/lib/form';

import MainPage from './../mainPage/index'

export default function Home() {

const [isModalVisible, setIsModalVisible] = useState(false);

// const [searchInput, setSearchInput] = useState('');

const [state, setState] = useState({

searchText: '',

searchedColumn: '',

});

const [modelKey, setModelKey] = useState('');

const [selectKey, setSelectKey] = useState([]);

const [selectModel, setSelectModel] = useState('');

const [selectedRowKeys, setSelectedRowKeys] = useState([]);

const [data, setData] = useState([

{

key: '1',

age: 32,

address: 'New York No. 1 Lake Park',

cachange: []

{

key: '2',

age: 42,

address: 'London No. 1 Lake Park',

cachange: []

{

key: '3',

age: 32,

address: 'Sidney No. 1 Lake Park',

cachange: []

]);

const [userList, setUserList] = useState([

{title: 'name1', id: 1, isChecked: false},

{title: 'name2', id: 2, isChecked: false},

{title: 'name3', id: 3, isChecked: false},

{title: 'name4', id: 4, isChecked: false}

]);

const handleSearch = (selectedKeys, confirm, dataIndex) => {

confirm();

setState({

searchText: selectedKeys[0],

searchedColumn: dataIndex,

});

};

const handleReset = clearFilters => {

clearFilters();

setState({ searchText: '' });

};

let searchInput = ''

const getColumnSearchProps = dataIndex => ({

filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (

<Input

ref={node => {

searchInput = node;

// setSearchInput(node)

}}

placeholder={`Search ${dataIndex}`}

value={selectedKeys[0]}

onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}

onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}

style={{ marginBottom: 8, display: 'block' }}

<Space>

<Button

type="primary"

onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}

icon={<SearchOutlined />}

size="small"

style={{ width: 90 }}

</Button>

<Button onClick={() => handleReset(clearFilters)} size="small" style={{ width: 90 }}>

Reset

</Button>

<Button

type="link"

size="small"

onClick={() => {

confirm({ closeDropdown: false });

setState({

searchText: selectedKeys[0],

searchedColumn: dataIndex,

});

console.log({

searchText: selectedKeys[0],

searchedColumn: dataIndex,

})

}}

Filter

</Button>

</Space>

</div>

filterIcon: filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,

onFilter: (value, record) =>

record[dataIndex]

? record[dataIndex].toString().toLowerCase().includes(value.toLowerCase())

: '',

onFilterDropdownVisibleChange: visible => {

if (visible) {

setTimeout(() => searchInput && searchInput.select(), 100);

}

});

const columns = [

{

title: 'Name',

dataIndex: 'name',

key: 'name',

...getColumnSearchProps('name'),

render: text => <a>{text}</a>,

{

title: 'Age',

dataIndex: 'age',

key: 'age',

...getColumnSearchProps('age')

{

title: 'Address',

dataIndex: 'address',

key: 'address',

...getColumnSearchProps('address')

{

title: 'Action',

key: 'cachange',

dataIndex: 'cachange',

...getColumnSearchProps('cachange'),

render: (cachange, record) => (

<a onClick={() => {showModal(record, 2)}}><SearchOutlined /></a>

<span>{cachange.map(v => v.title).join(',')}</span>

{/* {

cachange.map((v, i) => {

return <span key={i + 'cachange'}>{(v.title + ',').slice(0, -1) ||''}</span>

})

} */}

</Space>

];

const rowSelection = {

selectedRowKeys: selectKey,

onChange: (selectedRowKeys, selectedRows) => {

setSelectKey(selectedRowKeys)

// console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);

}

// onSelect: (record, selected, selectedRows) => {

// console.log(record, selected, selectedRows);

// },

// onSelectAll: (selected, selectedRows, changeRows) => {

// console.log(selected, selectedRows, changeRows);

// },

};

const showModal = (record, type) => {

let newList = [...userList]

newList.forEach((v1) => {

v1.isChecked = false

})

setUserList(newList)

setModelKey(record.key)

setSelectModel(type)

setIsModalVisible(true);

};

const handleOk = () => {

let selectPerson = userList.filter((v) => { return v.isChecked})

if (selectPerson && selectPerson.length) {

let newData = [...data]

if (selectModel === 2) {

newData.forEach((v) => {

if (v.key === modelKey) {

v.cachange = selectPerson

}

})

} else if (selectModel === 1) {

newData.forEach((v, i) => {

if (selectKey.includes(`${i + 1}`)) {

v.cachange = selectPerson

}

})

}

setData(newData)

}

setModelKey('')

setSelectModel('')

setSelectKey([])

setIsModalVisible(false);

}

const handleCancel = () => {

setModelKey('')

setSelectModel('')

setIsModalVisible(false);

};

const pClick = (v) => {

let newList = [...userList]

newList.forEach((v1) => {

// v1.isChecked = false

if (v1.id === v.id) {

v1.isChecked = !v1.isChecked

}

})

setUserList(newList)

};

const handleOk = (file) => {

// const formData = new FormData();//创建formData对象

// fileList.forEach(item => {

// formData.append('file', item.originFileObj);

// });

// axios({

// method: 'post',

// url: '',

// data: formData

// }).then(res => {

// console.log(res.data.msg)

// onSuccess(response, file);

// if (res.data.msg === 'success') {

// //上传成功后执行的函数

// }

// })

//清空fileList

// fileList.length = 0;

console.log(file)

};

const handleChange = (info) => {

props.callBack(info)

setFileList(info.fileList)

}

<Upload

customRequest = {myUpload}

// name="file"

// action="https://www.mocky.io/v2/5cc8019d300000980a055e76"

// headers={{

// authorization: 'authorization-text',

// }}

// multiple={true}

// //陈列样式，现在是卡片式

// // listType="picture"

// beforeUpload={() => {

// //阻止上传

// return false;

// }}

onChange={(info) => { handleChange(info) }}

</Upload>

return (

<div>

<MainPage callBack={(data) => console.log(data)}></MainPage>

<Button onClick={() => {showModal({key: ''}, 1)}}>批量变更</Button>

{

userList.map((v, i) => {

return <p key={i + 'userList'} className={v.isChecked ? 'bg' : ''} onClick={() => {pClick(v)}}>{v.title}</p>

})

}

</Modal>

</div>

)

}

// function Home() {

// return (

// <div>

// <p>hhh</p>

// </div>

// )

// }

// export default Home;