react+ant design实现Table的增、删、改的示例代码
更新时间：2018年12月27日 10:52:26 作者：UniqueMen
这篇文章主要介绍了react+ant design实现Table的增、删、改的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
本人小白一名，第一次学习react ,该资料为本人原创，采用的是react+ant design的Tabled的一个小demo,暂时只实现了增加，删除单行，多行删除有Bug,查看详情，呕心沥血耗时一周完成，禁止抄袭，转载请先留言，
1、main.jsx
import React from 'react';
import ReactDom from 'react-dom';
import ExampleTable from './ExampleTable.jsx'
ReactDom.render(
<ExampleTable/>,
document.getElementById('AppRoot')
);
2、ExampleTable.jsx, 注：记住引入antd.css， 否则Table组件无法正常显示。
import React from 'react';
import { Table,Button,Input,Icon,Popconfirm,Alert } from 'antd';
import AddUser from './AddUser.jsx'
import UserDetails from './UserDetails.jsx'
class ExampleTable extends React.Component {
constructor(props) {// 构造函数
super(props);
this.state = {
dataSource:[
{ key: 1, nid:1, name: 'tab', gender:'男' , age: 22, schoolname: '第一中学', description: '热爱班级活动，尊敬老师'},
{ key: 2, nid:2, name: 'shift', gender:'男' , age: 22, schoolname: '第一中学', description: '热爱班级活动，尊敬老师'},
{ key: 6, nid:6, name: 'ctrl', gender:'男' , age: 22, schoolname: '第一中学', description: '热爱班级活动，尊敬老师'},
{ key: 4, nid:4, name: 'caps lock', gender:'男' , age: 22, schoolname: '第一中学', description: '热爱班级活动，尊敬老师'},
{ key: 5, nid:5, name: 'enter', gender:'女' , age: 22, schoolname: '第一中学', description: '热爱班级活动，尊敬老师'}
],
index : '',
PersonCount :0,
selectedRowKeys:[],
selectedRows:[],
record : 'abc'
};
this.onDelete = this.onDelete.bind(this);//绑定this,声明该方法需要绑定this, 直接在onClick中调用
this.appendPerson = this.appendPerson.bind(this);
this.handleSelectedDelete = this.handleSelectedDelete.bind(this);
this.columns = [
{ title: '编号', dataIndex: 'nid', key: 'nid' ,width:'8%'},
{ title: '姓名', dataIndex: 'name', key: 'name' ,width:'15%'},
{ title: '性别', dataIndex: 'gender', key: 'gender' ,width:'10%'},
{ title: '年龄', dataIndex: 'age', key: 'age',width:'15%', },//render: (text, record, index) => (Math.floor(record.age/10))*10+"多岁"},
{ title: '学校', dataIndex: 'schoolname', key: 'schoolname',width:'15%' },
{ title: '在校表现', dataIndex: 'description', key: 'description' ,width:'20%'},
{ title: '操作', dataIndex: '', key: 'operation', width:'32%',render: (text,record,index)=>(
<span>
<Popconfirm title="删除不可恢复，你确定要删除吗?" >
<a title="用户删除" className="mgl10"onClick={this.onDelete.bind(this,index)}>
<Icon type="delete"/></a>
</Popconfirm>
<span className="ant-divider"/>
<UserDetails className="user_details" pass={record}/>
</span>
) },
];
}
appendPerson(event){//得到子元素传过来的值
let array = [];
let count = 0;
this.state.dataSource.forEach(function (element) {
Object.keys(element).some(function (key) {
if (key === 'nid') {
count++;
array[count] = element.nid
}
})
})
let sortData =array.sort();//对遍历得到的数组进行排序
let MaxData = sortData[(this.state.dataSource.length)-1]//取最后一位下标的值
event.key=MaxData+1;
event.nid = MaxData+1;
this.setState({
dataSource:[...this.state.dataSource,event]
})
}
onDelete(index){
console.log(index)
const dataSource = [...this.state.dataSource];
dataSource.splice(index, 1);//index为获取的索引，后面的 1 是删除几行
this.setState({ dataSource });
}
handleSelectedDelete(){
if(this.state.selectedRowKeys.length>0){
console.log(...this.state.selectedRowKeys)
const dataSource = [...this.state.dataSource]
dataSource.splice(this.state.selectedRows,this.state.selectedRows.length)
this.setState({ dataSource });
}
else{
}
}
render() {
//联动选择框
const rowSelection = {
onChange: (selectedRowKeys, selectedRows) => {
this.setState({//将选中的id和对象存入state
selectedRowKeys:selectedRowKeys,
selectedRows:selectedRows
})
console.log(selectedRows,selectedRowKeys)
},
onSelect: (record, selected, selectedRows) => {
//console.log( record, ` selected :${selected}`,`selectedRows:${selectedRows}`);
},
onSelectAll: (selected, selectedRows, changeRows) => {
//console.log(selected, selectedRows, changeRows);
},
getCheckboxProps: record => ({
disabled: record.name === 'Disabled User', // Column configuration not to be checked
}),
}
return (
<div className="div_body">
<div id="div_left"></div>
<div id="div-right">
<div className="table_oftop">
<Button type="primary" icon="search" style={{float:"right",marginLeft:10}}>查询</Button>
<Input placeholder="input search text" style ={{width:300,float:"right"}}/>
<div id="add_delete">
<Button type="primary" className="selectedDelete" onClick={this.handleSelectedDelete}>删除所选</Button>
<AddUser className="add_user_btn" callback={this.appendPerson}/>
</div>
</div>
<Table columns={this.columns}
dataSource={this.state.dataSource}
className="table"
rowSelection={rowSelection}
scroll ={{y:400}}/>
</div>
</div>
);
}
}
module.exports = ExampleTable;
3、AddUser.jsx
import React from 'react';
import {Form,Input,Button,Select,Modal} from 'antd'
const FormItem = Form.Item;
const Option = Select.Option;
class AddUser extends React.Component{//在es6中定义一个AddUser类
constructor(props){//构造函数
super(props);
this.state = {
visible:false
};
this.handleAdd = this.handleAdd.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.handleOk = this.handleOk.bind(this)
this.handleClear = this.handleClear.bind(this)
}
handleAdd() {
this.setState({
visible: true
});
}
handleSubmit(e){//提交表单
e.preventDefault();
this.props.form.validateFieldsAndScroll((err,values)=>{
if(!err){
//console.log('接收的值：',values);
this.setState({
visible:false
})
this.props.form.resetFields();//清空提交的表单
//当值传递到父元素后，通过回调函数触发appendPerson方法将参数values带到父元素
this.props.callback(values);
}
})
}
handleClear(){
this.props.form.resetFields();
}
handleOk() {
this.setState({
visible: false
});
}
render(){
const {getFieldDecorator} = this.props.form;
const formItemLayout = {
labelCol:{span : 6},
wrapperCol:{span: 14}
};
const tailFormItemLayout = {
wrapperCol: {
span: 14,
offset: 8
}
};
return(
<div>
<Button type="primary" onClick={this.handleAdd}>添加用户</Button>
<Modal title="新建用户" visible={this.state.visible} onCancel={this.handleOk} onOk={this.handleOk}>
<Form onSubmit={this.handleSubmit}>
<FormItem {...formItemLayout} label = "用户名" hasFeedback>
{getFieldDecorator('name', {
rules:[{
required:true,message:'请输入您的 name！'
}]
})(
<Input placeholder="请输入您的用户名！"/>
)}
</FormItem>
<FormItem {...formItemLayout} label="性别" hasFeedback>
{getFieldDecorator('gender',{
rules:[{
required:true,message:'请输入您的 gender！'
}]
})(
<Select placeholder="请选择您的性别">
<Option value="男">男</Option>
<Option value="女">女</Option>
</Select>
)}
</FormItem>
<FormItem {...formItemLayout} label="年龄" hasFeedback>
{getFieldDecorator('age',{
rules:[{required:true,message:'请选择您的 Age'
}]
})(
<Select placeholder="请选择你您的年龄">
<Option value="26">26</Option>
<Option value="27">27</Option>
<Option value="28">28</Option>
</Select>
)}
</FormItem>
<FormItem {...formItemLayout} label="就读学校" hasFeedback>
{getFieldDecorator('schoolname',{
rules:[{required:true,message:'请输入您的就读学校'}]
})(
<Input placeholder="请输入您的就读学校！"/>
)}
</FormItem>
<FormItem {...formItemLayout} label="在校表现" hasFeedback>
{getFieldDecorator('description',{
rules:[{required:true,message:'请输入您的在校表现'}]
})(
<Input type="textarea" rows={3} placeholder="请输入您的在校表现!"/>
)}
</FormItem>
<FormItem {...tailFormItemLayout} style={{padding:10}}>
<Button type="primary" htmlType="submit" size="large">提交</Button>
<Button type="primary" size="large" onClick={this.handleClear}>重置</Button>
</FormItem>
</Form>
</Modal>
</div>
)
}
}
AddUser = Form.create()(AddUser); //解决了getFieldDecorator无法定义;
export default AddUser;
4、UserDetails.jsx
import React from 'react'
import {Modal,Button} from 'antd'
/*
*/
class UserDetails extends React.Component{
constructor(props){
super(props);
this.state={
visible:false
}
this.handlePopup = this.handlePopup.bind(this);
this.handleOkOrCancel = this.handleOkOrCancel.bind(this);
}
handlePopup() {
this.setState({
visible: true
});
}
handleOkOrCancel(){
this.setState({
visible: false
});
}
render(){
return(
<div>
<a onClick={this.handlePopup}>详情</a>
<Modal title={this.props.pass.name} visible={this.state.visible}
onOk= {this.handleOkOrCancel} onCancel={this.handleOkOrCancel}>
<p>姓名： {this.props.pass.name}</p>
<p>性别： {this.props.pass.gender}</p>
<p>年龄： {this.props.pass.age}</p>
<p>就读学校： {this.props.pass.schoolname}</p>
<p>在校表现： {this.props.pass.description}</p>
</Modal>
</div>
)
}
}
export default UserDetails;
5、ExampleStyle.css
#div-right{
width:80%;
height:400px;
text-Align:center;
margin: 0 auto;
}
.div_body{
margin-top: 0.5%;
}
.table_oftop{
padding: 10px;
}
.selectedDelete{
float: left;
margin-left: 35%;
}
.add_user_btn{
margin-left: auto;
}
.user_details{
float: right;
}
ant design 官网地址：https://ant.design/components/table-cn/ 看不懂的可以参考官方示例。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
最近笔者在完成一个移动端小项目的过程中需要实现整屏翻页的效果；调研完毕之后,最终决定使用pullPage.js实现此功能,fullPage.js使用起来比较方便,并且官网上也给了在react项目中使用的demo,本文记录了这个第三方库的使用过程,感兴趣的朋友可以参考下2023-11-11
捕获异常是来定位你错误代码的。本文主要介绍了 React如何捕获异常，你知道多少种方法，ErrorBoundary，ErrorBoundary-try-catch等等。本文就来详细的介绍一下2021-06-06
setState是React组件中用于更新状态的方法,是类组件中的方法,用于更新组件的状态并重新渲染组件,本文给大家详细介绍了React中的setState执行机制,文中通过代码示例介绍的非常详细,需要的朋友可以参考下2023-12-12
Refs是一个 获取 DOM节点或React元素实例的工具,在React中Refs 提供了一种方式,允许用户访问DOM 节点或者在render方法中创建的React元素,这篇文章主要给大家介绍了关于React中refs的一些常见用法,需要的朋友可以参考下2022-12-12
React通过redux-persist持久化数据存储的方法示例
这篇文章主要介绍了React通过redux-persist持久化数据存储的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
windows下create-react-app 升级至3.3.1版本踩坑记
这篇文章主要介绍了windows下create-react-app 升级至3.3.1版本踩坑记，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
这篇文章主要为大家介绍了React路由拦截模式及withRouter示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要介绍了浅谈React Native Flexbox布局(小结),小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
高阶组件就是接受一个组件作为参数并返回一个新组件（功能增强的组件）的函数。这里需要注意高阶组件是一个函数，并不是组件，这一点一定要注意，本文给大家分享React高阶组件使用小结，一起看看吧2022-08-08
react事件绑定时。this并不会指向当前DOM元素。往往使用bind来改变this指向，今天通过本文给大家介绍React事件绑定的方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-12-12
最新评论