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 官网地址：    看不懂的可以参考官方示例。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。