React學習之旅----mock模擬假資料及封裝axios,動態渲染表格
阿新 • • 發佈:2018-11-02
import React from 'react'; import { Card, Table, Modal, Button, message } from 'antd'; import axios from './../../axios/index' import Utils from './../../utils/utils'; export default class BasicTable extends React.Component { state = { dataSource2: [] } params = { page: 1 } componentDidMount () { const data = [ { id: '0', userName: 'Jack', sex: '1', state: '1', interest: '1', birthday: '2000-01-01', address: '北京市海淀區奧林匹克公園', time: '09:00' }, { id: '1', userName: 'Tom', sex: '1', state: '1', interest: '1', birthday: '2000-01-01', address: '北京市海淀區奧林匹克公園', time: '09:00' }, { id: '2', userName: 'Lily', sex: '1', state: '1', interest: '1', birthday: '2000-01-01', address: '北京市海淀區奧林匹克公園', time: '09:00' }, ] data.map((item, index) => { return item.key = index; }) this.setState({ dataSource: data }) this.request(); } // 動態獲取mock資料 request = () => { let _this = this; axios.ajax({ url: '/table/list', data: { params: { page: this.params.page }, // 通過更改布林值,來控制是否載入載入loading isShowLoading: true } }).then((res) => { // console.log(res) if (res.code === 0) { console.log(res) res.result.map((item, index) => { // console.log(item, index) // 每個表格中需要key來標識唯一資料,防止渲染出錯 return item.key = index; }) this.setState({ dataSource2: res.result, selectedRowKeys: [], selectedRows: null, pagination: Utils.pagination(res, (current) => { _this.params.page = current; this.request(); }) }) } }) } onRowClick = (record, index) => { let selectKey = [index]; Modal.info({ title: '資訊', content: `使用者名稱:${record.userName},使用者愛好:${record.interest}` }) this.setState({ selectedRowKeys: selectKey, selectedItem: record }) } // 多選執行刪除動作 handleDelete = (() => { let rows = this.state.selectedRows; let ids = []; rows.map((item) => { return ids.push(item.id) }) Modal.confirm({ title: '刪除提示', content: `您確定要刪除這些資料嗎?${ids.join(',')}`, onOk: () => { message.success('刪除成功'); this.request(); } }) }) render () { const columns = [ { title: 'id', key: 'id', dataIndex: 'id' }, { title: '使用者名稱', key: 'userName', dataIndex: 'userName' }, { title: '性別', key: 'sex', dataIndex: 'sex', render (sex) { return sex === 1 ? '男' : '女' } }, { title: '狀態', key: 'state', dataIndex: 'state', render (state) { let config = { '1': '鹹魚一條', '2': '風華浪子', '3': '北大才子', '4': '百度FE', '5': '創業者' } return config[state]; } }, { title: '愛好', key: 'interest', dataIndex: 'interest', render (abc) { let config = { '1': '游泳', '2': '打籃球', '3': '踢足球', '4': '跑步', '5': '爬山', '6': '騎行', '7': '桌球', '8': '麥霸' } return config[abc]; } }, { title: '生日', key: 'birthday', dataIndex: 'birthday' }, { title: '地址', key: 'address', dataIndex: 'address' }, { title: '早起時間', key: 'time', dataIndex: 'time' } ] const selectedRowKeys = this.state.selectedRowKeys; const rowSelection = { type: 'radio', selectedRowKeys } const rowCheckSelection = { type: 'checkbox', selectedRowKeys, onChange: (selectedRowKeys, selectedRows) => { this.setState({ selectedRowKeys, selectedRows }) } } return ( <div> <Card title="基礎表格"> <Table bordered columns={columns} dataSource={this.state.dataSource} pagination={false} /> </Card> <Card title="動態資料渲染表格-Mock" style={{ margin: '10px 0' }}> <Table bordered columns={columns} dataSource={this.state.dataSource2} pagination={false} /> </Card> <Card title="Mock-單選" style={{ margin: '10px 0' }}> <Table bordered rowSelection={rowSelection} onRow={(record, index) => { return { onClick: () => { this.onRowClick(record, index); } }; }} columns={columns} dataSource={this.state.dataSource2} pagination={false} /> </Card> <Card title="Mock-單選" style={{ margin: '10px 0' }}> <div style={{ marginBottom: 10 }}> <Button onClick={this.handleDelete}>刪除</Button> </div> <Table bordered rowSelection={rowCheckSelection} columns={columns} dataSource={this.state.dataSource2} pagination={false} /> </Card> <Card title="Mock-表格分頁" style={{ margin: '10px 0' }}> <Table bordered columns={columns} dataSource={this.state.dataSource2} pagination={this.state.pagination} /> </Card> </div> ); } }
import JsonP from 'jsonp' import axios from 'axios' import { Modal } from 'antd' export default class Axios { static jsonp (options) { return new Promise((resolve, reject) => { JsonP(options.url, { param: 'callback' }, function (err, response) { if (response.status === 'success') { resolve(response); } else { reject(response.messsage); } }) }) } static ajax (options) { let loading; if (options.data && options.data.isShowLoading !== false) { loading = document.getElementById('ajaxLoading'); loading.style.display = 'block'; } console.log(options) let baseApi = 'https://www.easy-mock.com/mock/5bd5a62382302f7129a27ffe/mockapi'; return new Promise((resolve, reject) => { axios({ url: options.url, method: 'get', baseURL: baseApi, timeout: 5000, params: (options.data && options.data.params) || '' }).then((response) => { if (options.data && options.data.isShowLoading !== false) { loading = document.getElementById('ajaxLoading'); loading.style.display = 'none'; } console.log(response) if (response.status === 200) { let res = response.data; console.log(res) if (res.code === 0) { console.log(res) resolve(res); } else { Modal.info({ title: "提示", content: res.msg }) } } else { reject(response.data); } }) }); } }