欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

react+ant design实现Table的增、删、改的示例代码

程序员文章站 2022-04-10 09:58:18
本人小白一名,第一次学习react ,该资料为本人原创,采用的是react+ant design的tabled的一个小demo,暂时只实现了增加,删除单行,多行删除有bug...

本人小白一名,第一次学习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 官网地址:    看不懂的可以参考官方示例。

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