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 相关文章推荐
JS request函数 用来获取url参数
May 17 Javascript
基于jQuery的实现简单的分页控件
Oct 10 Javascript
js前台判断开始时间是否小于结束时间
Feb 23 Javascript
同时使用n个window onload加载实例介绍
Apr 25 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
Sep 06 Javascript
深入学习JavaScript中的Rest参数和参数默认值
Jul 28 Javascript
jQuery  ready方法实现原理详解
Oct 19 Javascript
JS 在数组指定位置插入/删除数据的方法
Jan 12 Javascript
Vue框架中正确引入JS库的方法介绍
Jul 30 Javascript
vue项目移动端实现ip输入框问题
Mar 19 Javascript
javascript验证form表单数据的案例详解
Mar 25 Javascript
深入学习JavaScript 高阶函数
Jun 11 Javascript
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
PHP中路径问题的解决方案
2006/10/09 PHP
php cli 小技巧
2013/06/03 PHP
PHP怎么实现网站保存快捷方式方便用户随时浏览
2013/08/15 PHP
php随机显示图片的简单示例
2014/02/15 PHP
destoon二次开发入门示例
2014/06/20 PHP
PHP开发Apache服务器配置
2015/07/15 PHP
PHP读取、解析eml文件及生成网页的方法示例
2017/09/04 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
js类中的公有变量和私有变量
2008/07/24 Javascript
javascript 表单的友好用户体现
2009/01/07 Javascript
jQuery Div中加载其他页面的实现代码
2009/02/27 Javascript
用正则表达式 动态创建/增加css style script 兼容IE firefox
2009/03/10 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
2011/12/12 Javascript
js调用AJAX时Get和post的乱码解决方法
2013/06/04 Javascript
JQuery中extend的用法实例分析
2015/02/08 Javascript
Angularjs中使用Filters详解
2016/03/11 Javascript
ES6新特性八:async函数用法实例详解
2017/04/21 Javascript
vue实现百度搜索功能
2020/12/28 Javascript
js实现简单的倒计时
2021/01/28 Javascript
python模拟登陆Tom邮箱示例分享
2014/01/13 Python
Python MD5加密实例详解
2017/08/02 Python
Python_查看sqlite3表结构,查询语句的示例代码
2019/07/17 Python
python3爬取torrent种子链接实例
2020/01/16 Python
Python random模块制作简易的四位数验证码
2020/02/01 Python
python生成13位或16位时间戳以及反向解析时间戳的实例
2020/03/03 Python
matplotlib之多边形选区(PolygonSelector)的使用
2021/02/24 Python
html5表单及新增的改良元素详解
2016/06/07 HTML / CSS
英国设计的甲板鞋和船鞋:Chatham
2018/12/06 全球购物
电大物流学生的自我评价
2013/10/25 职场文书
校园文化建设方案
2014/02/03 职场文书
公司寄语大全
2014/04/10 职场文书
小学模范班主任事迹材料
2014/05/13 职场文书
法制宣传标语集锦
2014/06/25 职场文书
雷锋之歌观后感
2015/06/10 职场文书
四年级作文之说明文作文
2019/10/14 职场文书
简述python四种分词工具,盘点哪个更好用?
2021/04/13 Python