react+antdesign实现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(, 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)=>() }, ]; } 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 ( ); } } 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() } } 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(详情) } } export default UserDetails;姓名: {this.props.pass.name}
性别: {this.props.pass.gender}
年龄: {this.props.pass.age}
就读学校: {this.props.pass.schoolname}
在校表现: {this.props.pass.description}
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/ 看不懂的可以参考官方示例。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
本文标题:react+antdesign实现Table的增、删、改的示例代码
文章源于:http://pwwzsj.com/article/jhspcs.html其他资讯