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


Posted in Javascript onDecember 27, 2018

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

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

Javascript 相关文章推荐
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
Sep 14 Javascript
清除js缓存的多种方法总结
Dec 09 Javascript
Vuejs 页面的区域化与组件封装的实现
Sep 11 Javascript
打造通用的匀速运动框架(实例讲解)
Oct 17 Javascript
VueJs 搭建Axios接口请求工具
Nov 20 Javascript
Angular实现可删除并计算总金额的购物车功能示例
Dec 26 Javascript
jQuery中each方法的使用详解
Mar 18 jQuery
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
VeeValidate在vue项目里表单校验应用案例
May 09 Javascript
JavaScript使用类似break机制中断forEach循环的方法
Nov 13 Javascript
详解VUE里子组件如何获取父组件动态变化的值
Dec 26 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
React降级配置及Ant Design配置详解
Dec 27 #Javascript
详解Ant Design of React的安装和使用方法
Dec 27 #Javascript
利用Angular2的Observables实现交互控制的方法
Dec 27 #Javascript
angular 用Observable实现异步调用的方法
Dec 27 #Javascript
详解CommonJS和ES6模块循环加载处理的区别
Dec 26 #Javascript
vue-router beforeEach跳转路由验证用户登录状态
Dec 26 #Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
Dec 26 #Javascript
You might like
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
php5.3 废弃函数小结
2010/05/16 PHP
PHP 安全检测代码片段(分享)
2013/07/05 PHP
详解WordPress中的头像缓存和代理中的缓存更新方法
2016/03/01 PHP
PHP自定义序列化接口Serializable用法分析
2017/12/29 PHP
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
2012/02/16 Javascript
JavaScript中的连字符详解
2013/11/28 Javascript
javascript日期计算实例分析
2015/06/29 Javascript
JavaScript图片轮播代码分享
2015/07/31 Javascript
jquery获取文档高度和窗口高度汇总
2016/01/25 Javascript
AngularJS  ng-table插件设置排序
2016/09/21 Javascript
JavaScript中的await/async的作用和用法
2016/10/31 Javascript
基于jquery实现的鼠标悬停提示案例
2016/12/11 Javascript
微信小程序 input输入框详解及简单实例
2017/01/10 Javascript
js面向对象编程总结
2017/02/16 Javascript
jQuery实现鼠标跟随效果
2017/02/20 Javascript
nodejs中向HTTP响应传送进程的输出
2017/03/19 NodeJs
微信小程序开发之麦克风动画 帧动画 放大 淡出
2017/04/18 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
2017/07/27 Javascript
微信小程序-滚动消息通知的实例代码
2017/08/03 Javascript
vue绑定class与行间样式style详解
2017/08/16 Javascript
移动端如何用下拉刷新的方式实现上拉加载
2018/12/10 Javascript
js时间转换毫秒的实例代码
2019/08/21 Javascript
js面试题之异步问题的深入理解
2020/09/20 Javascript
[14:21]VICI vs EG (BO3)
2018/06/07 DOTA
python实现马耳可夫链算法实例分析
2015/05/20 Python
Python的Flask开发框架简单上手笔记
2015/11/16 Python
Python数据类型详解(四)字典:dict
2016/05/12 Python
浅谈python可视化包Bokeh
2018/02/07 Python
从运行效率与开发效率比较Python和C++
2018/12/14 Python
django表单的Widgets使用详解
2019/07/22 Python
使用IPython或Spyder将省略号表示的内容完整输出
2020/04/20 Python
Python reques接口测试框架实现代码
2020/07/28 Python
建筑专业自我鉴定
2013/10/22 职场文书
七一晚会主持词
2015/06/29 职场文书
对Keras自带Loss Function的深入研究
2021/05/25 Python