当前位置: 首页 > 编程笔记 >

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

巢德华
2023-03-14
本文向大家介绍react+ant design实现Table的增、删、改的示例代码,包括了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/    看不懂的可以参考官方示例。

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

 类似资料:
  • 本文向大家介绍golang使用json格式实现增删查改的实现示例,包括了golang使用json格式实现增删查改的实现示例的使用技巧和注意事项,需要的朋友参考一下 需求和思路 在一般的小项目或者一个小软件,例如客户端之类的小程序中,可能会需要数据的持久化.但是使用一般的数据库(Mysql)之类的不合适.使用sqlite3这种嵌入式的是个较好的方法,但是Go语言中sqlite3的库是C语言的,Cgo

  • 前面介绍了beego框架实现的整体构思以及部分实现的伪代码,这小节介绍通过beego建立一个博客系统,包括博客浏览、添加、修改、删除等操作。 博客目录 博客目录如下所示: . ├── controllers │ ├── delete.go │ ├── edit.go │ ├── index.go │ ├── new.go │ └── view.go ├── main.go ├─

  • 本文向大家介绍nodejs操作mysql实现增删改查的实例,包括了nodejs操作mysql实现增删改查的实例的使用技巧和注意事项,需要的朋友参考一下 首先需要安装mysql模块:npm install mysql --save 然后创建user数据表: 接着使用nodejs对数据库进行增删改查: 最后运行js: 增删改查都已经执行成功了。 以上这篇nodejs操作mysql实现增删改查的实例就是

  • 本文向大家介绍Java springboot Mongodb增删改查代码实例,包括了Java springboot Mongodb增删改查代码实例的使用技巧和注意事项,需要的朋友参考一下 1、添加依赖 复制代码 完整pom.xm文件 2、applicaiton.yml 3、Mongodb增删改查 github地址:https://github.com/812406210/vue-demo.git

  • 本文向大家介绍C# 实现TXT文档转Table的示例代码,包括了C# 实现TXT文档转Table的示例代码的使用技巧和注意事项,需要的朋友参考一下 代码: 以上就是C# 实现TXT文档转Table的示例代码的详细内容,更多关于c# TXT文档转Table的资料请关注呐喊教程其它相关文章!

  • 一、前言 在第二章《Memcached源码分析 - Memcached源码分析之命令解析(2)》 和第三章《Memcached源码分析 - Memcached源码分析之消息回应(3)》 中我们主要通过Memcached的get命令,分析了Memcached的命令解析和消息回应的模块功能。这一章,我们主要来详细看一下Memcached常用的增删改查操作。 在看Memcached的增删改查操作前,我们