您好,登錄后才能下訂單哦!
本人小白一名,第一次學(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="用戶刪除" 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}}>查詢</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類 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}>添加用戶</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:'請(qǐng)輸入您的 name!' }] })( <Input placeholder="請(qǐng)輸入您的用戶名!"/> )} </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í)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。