【共享单车】—— React后台管理系统开发手记:AntD Table基础表格

前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录。最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star。



一、基础表格

  • Table组件基础Api
  1. bordered属性:是否展示外边框和列边框
  2. columns属性:表格列的配置描述(即表头)
  3. dataSource属性:数据数组
  4. pagination属性:分页器,设为 false 时不展示和进行分页

     <Card title="基础表格">
              <Table
                       bordered
                       columns={columns}
                       dataSource={this.state.dataSource}
                       pagination={false}
                />
    </Card>
    
  • Table基本用法
  1. render()中:定义columns表头配置信息数组

     const columns = [
                 {
                     title: ‘id‘,   //表头标题
                     dataIndex: ‘id‘ //数据源
                 },
                 {
                     title: ‘用户名‘,
                     dataIndex: ‘userName‘
                 },
                 {
                    title: ‘性别‘,
                    dataIndex: ‘sex‘,
                    render(sex){
                        return sex === 1 ? ‘男‘ : ‘女‘
                    }
                 },
                 {
                    title: ‘状态‘,
                    dataIndex: ‘state‘,
                    render(state){
                        let config = {
                            ‘1‘: ‘咸鱼一条‘,
                            ‘2‘: ‘人民公仆‘,
                            ‘3‘: ‘医院护士‘,
                            ‘4‘: ‘科技公司FE‘,
                            ‘5‘: ‘创业者‘
                        }
                        return config[state]
                    }
                 },
                 {
                    title: ‘爱好‘,
                    dataIndex: ‘interest‘,
                    render(abc){
                        let config = {
                            ‘1‘: ‘游泳‘,
                            ‘2‘: ‘打篮球‘,
                            ‘3‘: ‘踢足球‘,
                            ‘4‘: ‘跑步‘,
                            ‘5‘: ‘爬山‘,
                            ‘6‘: ‘骑行‘,
                            ‘7‘: ‘桌球‘,
                            ‘8‘: ‘麦霸‘
                        }
                        return config[abc]
                    }
                 },
                 {
                    title: ‘生日‘,
                    dataIndex: ‘birthday‘
                 },
                 {
                    title: ‘地址‘,
                    dataIndex: ‘address‘
                 },
                 {
                    title: ‘早起时间‘,
                    dataIndex: ‘time‘
                 }
            ]
  2. componentDidMount()中:指定表格的数据源 dataSource 为一个数组

    const dataSource = [   //数据源
                {
                    id: ‘0‘,
                    userName: ‘Elena‘,
                    sex: ‘1‘,
                    state: ‘1‘,
                    interest: ‘1‘,
                    birthday: ‘2019-01-01‘,
                    address: ‘西虹市海淀区桃花公园‘,
                    time: ‘07:00‘
                },
                {
                    id: ‘1‘,
                    userName: ‘Mary‘,
                    sex: ‘1‘,
                    state: ‘2‘,
                    interest: ‘3‘,
                    birthday: ‘2019-01-01‘,
                    address: ‘西虹市海淀区桃花公园‘,
                    time: ‘07:00‘
                },
                {
                    id: ‘2‘,
                    userName: ‘Tom‘,
                    sex: ‘2‘,
                    state: ‘3‘,
                    interest: ‘4‘,
                    birthday: ‘2019-01-01‘,
                    address: ‘西虹市海淀区桃花公园‘,
                    time: ‘07:00‘
                }
            ]  
  3. 报错:原因是数据需要指定唯一key值;使用 map 循环遍历可以快速添加key值

      

  4. 注意:定义好数据源后,必须通过this.setState将dataSource添加到state中
    state={}
    
    componentDidMount(){
        const dataSource= [……],
        dataSource.map((item, index) => {
            item.key = index;
        })
        this.setState({
            dataSource
        })
    }
    

        

二、动态数据渲染表格

  • 动态渲染数据
  1. 在线工具模拟数据:Easy Mock用法及Mock.js规范

  2. 生成数据

  3. src->axios->index.js:定义ajax方法,封装axios异步获取Easy Mock项目虚拟数据的过程【项目工程化】
    import axios from ‘axios‘
    import { Modal } from ‘antd‘;
    
    export default class Axios{
          ……
          static ajax(options){
             let baseApi = ‘https://www.easy-mock.com/mock/5c2c7c1b580d6209d1e2aa88/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(response.status === 200){
                          let res = response.data;
                          if(res.code === 0){
                              resolve(res);
                          }else{
                              Modal.info({
                                  title: ‘提示‘,
                                  content: res.msg
                              })
                          }
                    }else{
                          reject(response.data)
                    }
                  })
             });
         }
    }
    

    注意:根据返回的response获取数据信息时,要按照Easy Mock中定义的数据结构而定!!!

  4. baseTable.js中:定义request方法,调用axios动态获取Mock数据
    import axios from ‘./../../axios/index‘
    
    state = {
         dataSource2: []
    }
    params = {
          page: 1
    }
    
    //动态获取mock数据
    request = () => {
            let _this = this;
            axios.ajax({
                url: ‘/table/list‘,
                data:{
                    params:{
                        page: this.params.page
                    }
                }
            }).then((res) => {
                if(res.code === 0){
                   res.list.map((item, index) => {
                       item.key = index
                   })
                   this.setState({
                       dataSource2: res.list
                   })
                }
            })
     }
  5. Table组件中:指定数据源为动态获取到的dataSource2
    <Card title="Mock-动态数据渲染表格" style={{margin: ‘10px 0‘}}>
          <Table
               bordered
               columns={columns}
               dataSource={this.state.dataSource2}
               pagination={false}
          />
    </Card>

  

三、表格单选

  • rowSelection属性:列表项是否可选择,对象
  • 配置项:
  1. type:单选/多选
  2. selectedRowKeys:指定选中项的key数组,需要和onChange进行配合(单选,仅onRow事件即可)

    const selectedRowKeys = this.state.selectedRowKeys;
    const rowSelection = {
          type: ‘radio‘,
          selectedRowKeys
    }
    
  • onRow事件:控制点击某一行,设置行属性

     <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>
    

    提取出onRowClick方法:获取当前点击行的数据项record和索引index

    //点击某一行 record:当前点击行的数据项 index:当前点击行的索引
    onRowClick = (record, index) => {
            let selectKey = [index];
            Modal.info({
                title: ‘信息‘,
                content: `用户名:${record.userName},用户爱好:${record.interest}`
            });
            this.setState({
                selectedRowKeys: selectKey,
                selectedItem: record
            })
    }
    

      

四、表格复选

  • 配置rowSelection属性对象
  1. 添加onChange事件
  2. selectedRowKeys:当前选中的行索引
  3. selectedRows:当前选中的行对象

    const rowCheckSelection = {
                type: ‘checkbox‘,
                selectedRowKeys,
                onChange: (selectedRowKeys, selectedRows) => {
                    // let ids = []
                    // selectedRows.map((item) => {
                    //    ids.push(item.id)
                    // })
                    this.setState({
                        selectedRowKeys, //必需
                        // selectedIds: ids,
                        selectedRows
                    })
                }
    }
    
  • 选中多行执行操作
  1. 获取state中的seletedRows对象,遍历得到item对象
  2. 利用item.id执行操作
  3. 执行完操作,需要重新刷新页面:调用this.request()
    //多选执行删除动作
    handleDelete = () => {
            let rows = this.state.selectedRows;
            let ids = [];
            rows.map((item) => {
                ids.push(item.id)
            })
            Modal.confirm({
                title: ‘删除提示‘,
                content: `您确定要删除这些数据吗?${ids.join(‘,‘)}`,
                onOk: () => {
                   message.success(‘删除成功‘)
                   this.request();  //重新刷新页面
                }
            })
    }
  4. request方法中:当获取数据成功后,重置state中当前选中项参数均为空
    selectedRowKeys: [], //重置
    selectedRows: null,
  • 其它,同单选

    <Card title="Mock-复选" style={{margin: ‘10px 0‘}}>
            <div style={{marginBottom: 10}}>
                   <Button onClick={this.handleDelete}>删除</Button>
            </div>
            <Table
                    bordered
                    rowSelection={rowCheckSelection}
                    onRow={(record, index) => {
                            return {
                                onClick: () => {
                                    this.onRowClick(record, index)
                                }  //点击行
                            }
                    }}
                    columns={columns}
                    dataSource={this.state.dataSource2}
                    pagination={false}
            />
    </Card>
    

      

五、表格分页

  • src->utils->utils.js:封装pagination分页工具函数 【项目工程化】

    pagination(data,callback){
       return {
            onChange: (current) => {
                callback(current)   //回调函数返回当前页
            },
            current: data.page,
            pageSize: data.page_size,
            total: data.total,
            showTotal: () => {
                return  `共${data.total}条`
            },
            showQuickJumper: true  //是否快速跳转至某一页
       }
    }  

    注意:获取data对象的数据,需要符合Easy Mock中模拟数据的数据结构!!!

  • request方法中:当获取数据成功后,调用Utils.pagination()给state添加并配置pagination
    import Utils from ‘./../../utils/utils‘
    
    let _this = this; //保留外层this,否则this指向会有问题
    
    pagination: Utils.pagination(res,(current) => {
           _this.params.page = current;
           this.request();
    })
  • Table组件中使用pagination属性
    <Card title="Mock-表格分页" style={{margin: ‘10px 0‘}}>
          <Table
                    bordered
                    columns={columns}
                    dataSource={this.state.dataSource2}
                    pagination={this.state.pagination}
           />
    </Card>
    

     

六、Loading拦截加载项

  • index.html中:在<div id="root"></div>下配置全局html文件 【项目工程化】

    <div class="ajax-loading" id="ajaxLoading" style="display: none;">
          <div class="overlay"></div>
          <div class="loading">
              <img src="https://media.number-7.cn/ebike-h5/static/images/common/loading.gif" >
              <span>加载中,请稍后...</span>
          </div>
    </div>
  • src->style->loading.less:同时 common.less中引入
    /** load **/
    .ajax-loading{
        display: none;
        .loading{
          position: fixed;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          padding:0 40px;
          height: 80px;
          line-height: 80px;
          background: rgba(0, 0, 0, 0.75);
          border-radius: 6px;
          text-align: center;
          z-index: 9999;
          font-size:@fontD;
          color:#fff;
          img{
            width: 32px;
            vertical-align: middle;
          }
          span{
            margin-left:12px;
          }
        }
        .overlay{
          position: fixed;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          z-index: 9998;
          background: rgb(255, 255, 255);
          opacity: 0.1;
        }
      }
    
    @import ‘./../style/loading.less‘;
  • src->axios->index.js:ajax方法中设置loading默认display block,当获取数据成功后,改为display none
    let loading;
    if(options.data && options.data.isShowLoading !== false){
             loading = document.getElementById(‘ajaxLoading‘);
             loading.style.display = ‘block‘;
    }
    //其它代码
    .then((response)=>{
            if(options.data && options.data.isShowLoading !== false){
                        loading = document.getElementById(‘ajaxLoading‘);
                        loading.style.display = ‘none‘;
            }
    

      

七、实例代码

  • pages->table->basicTable.js:对应路由/admin/table/basic
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 BasicTables extends React.Component{
    state = {
        dataSource2: []
    }
    params = {
        page: 1
    }
    componentDidMount(){
        const dataSource = [   //数据源
            {
                id: ‘0‘,
                userName: ‘Elena‘,
                sex: ‘1‘,
                state: ‘1‘,
                interest: ‘1‘,
                birthday: ‘2019-01-01‘,
                address: ‘西虹市海淀区桃花公园‘,
                time: ‘07:00‘
            },
            {
                id: ‘1‘,
                userName: ‘Mary‘,
                sex: ‘1‘,
                state: ‘2‘,
                interest: ‘3‘,
                birthday: ‘2019-01-01‘,
                address: ‘西虹市海淀区桃花公园‘,
                time: ‘07:00‘
            },
            {
                id: ‘2‘,
                userName: ‘Tom‘,
                sex: ‘2‘,
                state: ‘3‘,
                interest: ‘4‘,
                birthday: ‘2019-01-01‘,
                address: ‘西虹市海淀区桃花公园‘,
                time: ‘07:00‘
            }
        ]
        dataSource.map((item, index) => {
            item.key = index;
        })
        this.setState({
            dataSource
        })
        this.request();
    }

    //动态获取mock数据
    request = () => {
        let _this = this;
        axios.ajax({
            url: ‘/table/list‘,
            data:{
                params:{
                    page: this.params.page
                },
                // isShowLoading: false
            }
        }).then((res) => {
            if(res.code === 0){
               res.list.map((item, index) => {
                   item.key = index
               })
               this.setState({
                   dataSource2: res.list,
                   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
        })
    }

    // add = () => {
    //     let item = this.state.selectedItem;
    //     if(item.id){

    //     }
    // }

    //多选执行删除动作
    handleDelete = () => {
        let rows = this.state.selectedRows;
        let ids = [];
        rows.map((item) => {
            ids.push(item.id)
        })
        Modal.confirm({
            title: ‘删除提示‘,
            content: `您确定要删除这些数据吗?${ids.join(‘,‘)}`,
            onOk: () => {
               message.success(‘删除成功‘)
               this.request();  //重新刷新页面
            }
        })
    }

    render(){
        const columns = [
             {
                 title: ‘id‘,   //表头标题
                 dataIndex: ‘id‘ //数据源
             },
             {
                 title: ‘用户名‘,
                 dataIndex: ‘userName‘
             },
             {
                title: ‘性别‘,
                dataIndex: ‘sex‘,
                render(sex){
                    return sex === 1 ? ‘男‘ : ‘女‘
                }
             },
             {
                title: ‘状态‘,
                dataIndex: ‘state‘,
                render(state){
                    let config = {
                        ‘1‘: ‘咸鱼一条‘,
                        ‘2‘: ‘人民公仆‘,
                        ‘3‘: ‘医院护士‘,
                        ‘4‘: ‘科技公司FE‘,
                        ‘5‘: ‘创业者‘
                    }
                    return config[state]
                }
             },
             {
                title: ‘爱好‘,
                dataIndex: ‘interest‘,
                render(abc){
                    let config = {
                        ‘1‘: ‘游泳‘,
                        ‘2‘: ‘打篮球‘,
                        ‘3‘: ‘踢足球‘,
                        ‘4‘: ‘跑步‘,
                        ‘5‘: ‘爬山‘,
                        ‘6‘: ‘骑行‘,
                        ‘7‘: ‘桌球‘,
                        ‘8‘: ‘麦霸‘
                    }
                    return config[abc]
                }
             },
             {
                title: ‘生日‘,
                dataIndex: ‘birthday‘
             },
             {
                title: ‘地址‘,
                dataIndex: ‘address‘
             },
             {
                title: ‘早起时间‘,
                dataIndex: ‘time‘
             }
        ]
        const selectedRowKeys = this.state.selectedRowKeys;
        const rowSelection = {
            type: ‘radio‘,
            selectedRowKeys
        }
        const rowCheckSelection = {
            type: ‘checkbox‘,
            selectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
                // let ids = []
                // selectedRows.map((item) => {
                //    ids.push(item.id)
                // })
                this.setState({
                    selectedRowKeys, //必需
                    // selectedIds: ids,
                    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}
                        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‘}}>
                    <Table
                        bordered
                        columns={columns}
                        dataSource={this.state.dataSource2}
                        pagination={this.state.pagination}
                    />
                </Card>
            </div>
        )
    }
}  


注:项目来自慕课网

原文地址:https://www.cnblogs.com/ljq66/p/10206605.html

时间: 2024-10-10 13:17:58

【共享单车】—— React后台管理系统开发手记:AntD Table基础表格的相关文章

【共享单车】—— React后台管理系统开发手记:项目准备

前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. 一.项目概述       React全家桶 React基础知识.生命周期 Router 4.0 语法讲解 Redux集成开发      AnD UI组件 最实用基础组件 AntD栅格系统 ETable组件封装 BaseForm组件封装 表格内嵌单选.复选封装      公共机制封装 Axios请求

【共享单车】—— React后台管理系统开发手记:主页面架构设计

前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. 一.页面结构定义 左侧导航栏,右侧页面结构 右侧显示内容分别分为上Header.中Content和下Footer部分 二.目录结构定义 src->admin.js:项目主结构代码(index.js中替换App.js挂载到根节点) src->common.js:项目公共结构代码(类似admin.j

【共享单车】—— React后台管理系统开发手记:城市管理和订单管理

前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. 一.城市管理 pages->city->index.js:对应路由/admin/city 顶部子组件一:选择表单 class FilterForm extends React.Component{ render(){ const { getFieldDecorator } = this.prop

【共享单车】—— React后台管理系统开发手记:UI菜单各个组件使用(Andt UI组件)

前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. 一.按钮Button pages->ui->button.js:对应路由/admin/ui/buttons import React from 'react'; import {Card, Button, Radio} from 'antd' import './ui.less' class B

【共享单车】—— React后台管理系统开发手记:AntD Form基础组件

前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. 一.使用Form组件开发登录页面 pages->form->login.js:对应路由/admin/form/login import React from 'react' import {Card, Form, Input, Button, message, Icon, Checkbox} f

【共享单车】—— React后台管理系统开发手记:AntD Table高级表格

前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. 一.头部固定 scroll属性:设置横向或纵向滚动,也可用于指定滚动区域的宽和高 <Card title="头部固定"> <Table bordered columns={columns} dataSource={this.state.dataSource} pagin

【共享单车】—— React后台管理系统开发手记:Router 4.0路由实战演练

前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. 一.React Router 4.0核心概念 4.0版本中已不需要路由配置,一切皆组件 react-router:基础路由包 提供了一些router的核心api,包括Router,Route,Switch等 react-router-dom:基于浏览器的路由(包含react-router) 提供了

【共享单车】—— React后台管理系统开发手记:权限设置和菜单调整(未完)

前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. 一.创建角色 权限菜单设计:RBAC权限模型(详解链接) RBAC,即基于角色的访问控制(Role-Based Access Control),是优秀的权限控制模型 主要通过角色和权限建立管理,再赋予用户不同的角色,来实现权限控制的目标 角色列表展示:对应Easy Mock数据接口/role/li

asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发2-Model层建立

上篇(asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发1-准备工作)文章讲解了开发过程中的准备工作,主要创建了项目数据库及项目,本文主要讲解项目M层的实现,M层这里讲的主要是通过Codefirst方式实现的. 一.M层简单介绍 1.M层很形象的将数据库里面的各个表格映射成了C#当中的类,比如上篇文章创建的用户表: ? 1 2 3 4 5 6 7 8 9 10 11 12 CREATE TABLE [dbo].[SYS_USER](          [ID]