react+ant design实现Table的增、删、改的示例代码
程序员文章站
2022-04-10 09:58:18
本人小白一名,第一次学习react ,该资料为本人原创,采用的是react+ant design的tabled的一个小demo,暂时只实现了增加,删除单行,多行删除有bug...
本人小白一名,第一次学习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 官网地址: 看不懂的可以参考官方示例。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。