本人小白一名，第一次學(xué)習(xí)react ,該資料為本人原創(chuàng)，采用的是react+ant design的Tabled的一個小demo,暫時只實現(xiàn)了增加，刪除單行，多行刪除有Bug,查看詳情，嘔心瀝血耗時一周完成，禁止抄襲，轉(zhuǎn)載請先留言，
創(chuàng)新互聯(lián)建站堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站建設(shè)、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的西青網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
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) {// 構(gòu)造函數(shù)
super(props);
this.state = {
dataSource:[
{ key: 1, nid:1, name: 'tab', gender:'男' , age: 22, schoolname: '第一中學(xué)', description: '熱愛班級活動，尊敬老師'},
{ key: 2, nid:2, name: 'shift', gender:'男' , age: 22, schoolname: '第一中學(xué)', description: '熱愛班級活動，尊敬老師'},
{ key: 6, nid:6, name: 'ctrl', gender:'男' , age: 22, schoolname: '第一中學(xué)', description: '熱愛班級活動，尊敬老師'},
{ key: 4, nid:4, name: 'caps lock', gender:'男' , age: 22, schoolname: '第一中學(xué)', description: '熱愛班級活動，尊敬老師'},
{ key: 5, nid:5, name: 'enter', gender:'女' , age: 22, schoolname: '第一中學(xué)', description: '熱愛班級活動，尊敬老師'}
],
index : '',
PersonCount :0,
selectedRowKeys:[],
selectedRows:[],
record : 'abc'
};
this.onDelete = this.onDelete.bind(this);//綁定this,聲明該方法需要綁定this, 直接在onClick中調(diào)用
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: '學(xué)校', dataIndex: 'schoolname', key: 'schoolname',width:'15%' },
{ title: '在校表現(xiàn)', 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();//對遍歷得到的數(shù)組進行排序
let MaxData = sortData[(this.state.dataSource.length)-1]//取最后一位下標(biāo)的值
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() {
//聯(lián)動選擇框
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){//構(gòu)造函數(shù)
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();//清空提交的表單
//當(dāng)值傳遞到父元素后，通過回調(diào)函數(shù)觸發(fā)appendPerson方法將參數(shù)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(
詳情
姓名： {this.props.pass.name}
性別： {this.props.pass.gender}
年齡： {this.props.pass.age}
就讀學(xué)校： {this.props.pass.schoolname}
在校表現(xiàn)： {this.props.pass.description}
)
}
}
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 官網(wǎng)地址：https://ant.design/components/table-cn/ 看不懂的可以參考官方示例。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
標(biāo)題名稱：react+antdesign實現(xiàn)Table的增、刪、改的示例代碼
轉(zhuǎn)載來于：http://weahome.cn/article/jhspcs.html
其他資訊
