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 相关文章推荐
关于JavaScript中原型继承中的一点思考
Jul 25 Javascript
根据json字符串生成Html的一种方式
Jan 09 Javascript
高效率JavaScript编写技巧整理
Aug 23 Javascript
jQuery关于导航条背景切换效果实现示例
Sep 04 Javascript
关于JavaScript作用域你想知道的一切
Feb 04 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
Sep 21 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
Mar 28 Javascript
微信小程序云开发 搭建一个管理小程序
May 17 Javascript
vue分页插件的使用方法
Dec 25 Javascript
浅谈Vue.use到底是什么鬼
Jan 21 Javascript
微信小程序实现简单文字跑马灯
May 26 Javascript
VUE : vue-cli中去掉路由中的井号#操作
Sep 04 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
ecshop 2.72如何修改后台访问地址
2015/03/03 PHP
PHP根据session与cookie用户登录状态操作类的代码
2016/05/13 PHP
Yii2实现跨mysql数据库关联查询排序功能代码
2017/02/10 PHP
用JS做的简单的可折叠的两级树形菜单
2013/09/21 Javascript
JavaScript开发人员的10个关键习惯小结
2014/12/05 Javascript
JQuery中Ajax()的data参数类型实例分析
2015/12/15 Javascript
js绘制购物车抛物线动画
2020/11/18 Javascript
超全面的javascript中变量命名规则
2017/02/09 Javascript
Bootstrap3多级下拉菜单
2017/02/24 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
2017/03/21 jQuery
解决npm安装Electron缓慢网络超时导致失败的问题
2018/02/06 Javascript
详解react关于事件绑定this的四种方式
2018/03/09 Javascript
JavaScript闭包原理与用法实例分析
2018/08/10 Javascript
vue下history模式刷新后404错误解决方法
2018/08/18 Javascript
Vue Elenent实现表格相同数据列合并
2020/11/30 Vue.js
[46:03]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python查看FTP是否能连接成功的方法
2015/07/30 Python
解读Python编程中的命名空间与作用域
2015/10/16 Python
用Python写一个无界面的2048小游戏
2016/05/24 Python
windows10下python3.5 pip3安装图文教程
2018/04/02 Python
python版大富翁源代码分享
2018/11/19 Python
Python使用MyQR制作专属动态彩色二维码功能
2019/06/04 Python
基于Python实现扑克牌面试题
2019/12/11 Python
python获取天气接口给指定微信好友发天气预报
2020/12/28 Python
利用CSS3的定位页面元素
2009/08/29 HTML / CSS
HTML5 canvas 基本语法
2009/08/26 HTML / CSS
外语学院毕业生的自我鉴定
2013/11/28 职场文书
一个大学生十年的职业规划
2014/01/17 职场文书
主持词开场白
2014/03/17 职场文书
先进事迹报告会主持词
2014/04/02 职场文书
工作目标责任书
2014/07/23 职场文书
学生考试舞弊检讨书
2015/01/01 职场文书
小学副班长竞选稿
2015/11/21 职场文书
详解PHP Swoole与TCP三次握手
2021/05/27 PHP
实体类或对象序列化时,忽略为空属性的操作
2021/06/30 Java/Android
sql查询语句之平均分、最高最低分及排序语句
2022/05/30 MySQL