react+ant design實(shí)現(xiàn)Table的增、刪、改的示例代碼
本人小白一名,第一次學(xué)習(xí)react ,該資料為本人原創(chuàng),采用的是react+ant design的Tabled的一個(gè)小demo,暫時(shí)只實(shí)現(xiàn)了增加,刪除單行,多行刪除有Bug,查看詳情,嘔心瀝血耗時(shí)一周完成,禁止抄襲,轉(zhuǎn)載請(qǐng)先留言,
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組件無(wú)法正常顯示。
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: '熱愛(ài)班級(jí)活動(dòng),尊敬老師'},
{ key: 2, nid:2, name: 'shift', gender:'男' , age: 22, schoolname: '第一中學(xué)', description: '熱愛(ài)班級(jí)活動(dòng),尊敬老師'},
{ key: 6, nid:6, name: 'ctrl', gender:'男' , age: 22, schoolname: '第一中學(xué)', description: '熱愛(ài)班級(jí)活動(dòng),尊敬老師'},
{ key: 4, nid:4, name: 'caps lock', gender:'男' , age: 22, schoolname: '第一中學(xué)', description: '熱愛(ài)班級(jí)活動(dòng),尊敬老師'},
{ key: 5, nid:5, name: 'enter', gender:'女' , age: 22, schoolname: '第一中學(xué)', description: '熱愛(ài)班級(jí)活動(dòng),尊敬老師'}
],
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: '編號(hào)', 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)=>(
<span>
<Popconfirm title="刪除不可恢復(fù),你確定要?jiǎng)h除嗎?" >
<a title="用戶(hù)刪除" 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){//得到子元素傳過(guò)來(lái)的值
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();//對(duì)遍歷得到的數(shù)組進(jìn)行排序
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)動(dòng)選擇框
const rowSelection = {
onChange: (selectedRowKeys, selectedRows) => {
this.setState({//將選中的id和對(duì)象存入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}}>查詢(xún)</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中定義一個(gè)AddUser類(lèi)
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)值傳遞到父元素后,通過(guò)回調(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(
<div>
<Button type="primary" onClick={this.handleAdd}>添加用戶(hù)</Button>
<Modal title="新建用戶(hù)" visible={this.state.visible} onCancel={this.handleOk} onOk={this.handleOk}>
<Form onSubmit={this.handleSubmit}>
<FormItem {...formItemLayout} label = "用戶(hù)名" hasFeedback>
{getFieldDecorator('name', {
rules:[{
required:true,message:'請(qǐng)輸入您的 name!'
}]
})(
<Input placeholder="請(qǐng)輸入您的用戶(hù)名!"/>
)}
</FormItem>
<FormItem {...formItemLayout} label="性別" hasFeedback>
{getFieldDecorator('gender',{
rules:[{
required:true,message:'請(qǐng)輸入您的 gender!'
}]
})(
<Select placeholder="請(qǐng)選擇您的性別">
<Option value="男">男</Option>
<Option value="女">女</Option>
</Select>
)}
</FormItem>
<FormItem {...formItemLayout} label="年齡" hasFeedback>
{getFieldDecorator('age',{
rules:[{required:true,message:'請(qǐng)選擇您的 Age'
}]
})(
<Select placeholder="請(qǐng)選擇你您的年齡">
<Option value="26">26</Option>
<Option value="27">27</Option>
<Option value="28">28</Option>
</Select>
)}
</FormItem>
<FormItem {...formItemLayout} label="就讀學(xué)校" hasFeedback>
{getFieldDecorator('schoolname',{
rules:[{required:true,message:'請(qǐng)輸入您的就讀學(xué)校'}]
})(
<Input placeholder="請(qǐng)輸入您的就讀學(xué)校!"/>
)}
</FormItem>
<FormItem {...formItemLayout} label="在校表現(xiàn)" hasFeedback>
{getFieldDecorator('description',{
rules:[{required:true,message:'請(qǐng)輸入您的在校表現(xiàn)'}]
})(
<Input type="textarea" rows={3} placeholder="請(qǐng)輸入您的在校表現(xiàn)!"/>
)}
</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無(wú)法定義;
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>就讀學(xué)校: {this.props.pass.schoolname}</p>
<p>在校表現(xiàn): {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 官網(wǎng)地址:https://ant.design/components/table-cn/ 看不懂的可以參考官方示例。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- react quill中圖片上傳由默認(rèn)轉(zhuǎn)成base64改成上傳到服務(wù)器的方法
- react build 后打包發(fā)布總結(jié)
- 詳解React開(kāi)發(fā)中使用require.ensure()按需加載ES6組件
- ReactiveCocoa代碼實(shí)踐之-UI組件的RAC信號(hào)操作
- React+Ant Design開(kāi)發(fā)環(huán)境搭建的實(shí)現(xiàn)步驟
- React降級(jí)配置及Ant Design配置詳解
- 詳解Ant Design of React的安裝和使用方法
- React使用UI(Ant?Design)框架的詳細(xì)過(guò)程
相關(guān)文章
React中組件的this.state和setState的區(qū)別
在React開(kāi)發(fā)中,this.state用于初始化和讀取組件狀態(tài),而setState()用于安全地更新?tīng)顟B(tài),正確使用這兩者對(duì)于管理React組件狀態(tài)至關(guān)重要,避免性能問(wèn)題和常見(jiàn)錯(cuò)誤2024-09-09
react+typescript中使用echarts的實(shí)現(xiàn)步驟
本文主要介紹了react+typescript中使用echarts的實(shí)現(xiàn)步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
手把手教您實(shí)現(xiàn)react異步加載高階組件
這篇文章主要介紹了手把手教您實(shí)現(xiàn)react異步加載高階組件,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
詳解如何使用React Hooks請(qǐng)求數(shù)據(jù)并渲染
這篇文章主要介紹了如何使用React Hooks請(qǐng)求數(shù)據(jù)并渲染,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
通過(guò)示例講解Remix?設(shè)計(jì)哲學(xué)理念
這篇文章主要為大家通過(guò)示例講解了Remix?設(shè)計(jì)哲學(xué)理念,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03
react?hooks?計(jì)數(shù)器實(shí)現(xiàn)代碼
這篇文章主要介紹了react?hooks計(jì)數(shù)器實(shí)現(xiàn)代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08
React文字展開(kāi)收起組件的實(shí)現(xiàn)示例
本文主要介紹了React文字展開(kāi)收起組件的實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07

