react AntUI(table组件使用案例)

import React from ‘react‘;
import {connect} from "react-redux"
import {bindActionCreators} from ‘redux‘;
import request from ‘@src/util/util.js‘;
import {Table, DatePicker,Layout, Row, Col, Select, Button, Icon, Input} from ‘antd‘;
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
const {Header,Content} = Layout;
const {Option} = Select;

function createTableConfig () {
    const columns = [{
        title: ‘序号‘,
        dataIndex: ‘no‘,
      },{
        title: ‘ID‘,
        dataIndex: ‘uid‘,
      },
      {
        title: ‘注册类型‘,
        dataIndex: ‘type‘,
      },
      {
        title: ‘来源‘,
        dataIndex: ‘isMobile‘,
      },
      {
        title: ‘审核状态‘,
        dataIndex: ‘status‘,
      },
      {
        title: ‘昵称‘,
        dataIndex: ‘username‘,
    }];

    let table = {
        columns,
        bordered: true,
        pagination: {
            showSizeChanger: true
        }
    }
    return table;
}

class Welcome extends React.Component{
    constructor(props) {
        super(props);

        let searchParm = {
            page:1,
            limit:10,
            registerType:-1,
            filter:0,
            keyword:‘‘,
            verifyStatus:-1,
            startTime:‘‘,
            endTime:‘‘
        }

        let tableData = {
            dataList:{
                list:[],
                totalCount:0
            }
        }

        this.state = {
            ...searchParm,
            ...tableData,
            dateTime:‘‘,
        }
    }

    handleChangeTimeMt(date, dateString) {
       this.setState({
           startTime:dateString[0],
           endTime:dateString[1],
           dateTime:date
       })
    }

    verifyStatusMt (option) {
        this.setState({
            verifyStatus:option
        })
    }

    changeInputValMt (el) {
        this.setState({
            keyword:el.target.value
        })
    }

    getTableDataMt (isInitPage) {
        if(!isInitPage){//搜索初始化分页参数
            this.setState({
                page:1,
                limit:10,
            })
        }

        let resolve = () => {
            let parm = ‘/member/list‘;
            parm += ‘?page=‘+this.state.page,
            parm += ‘&limit=‘+this.state.limit,
            parm += ‘&verifyStatus=‘ +this.state.verifyStatus;
            parm += ‘&registerType=‘ +this.state.registerType;
            parm += ‘&filter=‘ +this.state.filter;
            parm += ‘&keyword=‘ +this.state.keyword;
            parm += ‘&startTime=‘ +this.state.startTime;
            parm += ‘&endTime=‘ +this.state.endTime;

            request.get(parm)
            .then(res => {
                this.setState({
                    dataList: {
                        list:res.data.list,
                        totalCount:res.data.totalCount
                    }
                })
            })
        }

        setTimeout(resolve)
    }

    changeTableData (isShowSize, page, pageSize) {
        this.setState({
            page:page,
            limit:pageSize,
        })
        setTimeout(()=>{
            this.getTableDataMt(true)
        })
    }

    clearKeywordsMt () {
        this.setState({
            keyword:‘‘
        })
    }

    componentWillMount(){
        this.getTableDataMt()
    }

    render(){
        let welcomeStyle = {
            position:‘relative‘
        }
        let headStyle = {
            padding:‘0 20px‘,
            lineHeight:‘64px‘
        }
        let contStyle = {
            padding:‘20px‘
        }
        let headPointStyle = {
            marginLeft: ‘20px‘,
            marginRight: ‘10px‘
        }
        let headInputStyle = {
            display: ‘inline-block‘,
            width: ‘160px‘,
            marginRight: ‘10px‘
        }

        let tableConfig = createTableConfig.call(this);
            tableConfig.dataSource = this.state.dataList.list;
        let pagination = tableConfig.pagination;
        let {page, limit} = this.state;

        pagination.onChange = this.changeTableData.bind(this, false);
        pagination.onShowSizeChange = this.changeTableData.bind(this, true);
        pagination.total = this.state.dataList.totalCount;
        pagination.current = page;
        pagination.pageSize = limit;
        pagination.showTotal = (total, range) => ("筛选结果:" + total);

        return (
            <div className="welcome" style={welcomeStyle}>
                {/* 搜索区域 */}
                <Content style={headStyle}>
                    <RangePicker onChange={this.handleChangeTimeMt.bind(this)} value={this.state.dateTime}/>
                    <span style={headPointStyle}>审核状态</span>
                    <Select defaultValue={-1}
                        value={this.state.verifyStatus}
                        onSelect={this.verifyStatusMt.bind(this)}>
                        <Option value={-1}>全部</Option>
                        <Option value={1}>待审核</Option>
                        <Option value={2}>已通过</Option>
                        <Option value={3}>已拒绝</Option>
                    </Select>
                    <span style={headPointStyle}>&nbsp;</span>
                    <div style={headInputStyle}>
                        <Input
                            value={this.state.keyword}
                            onInput={this.changeInputValMt.bind(this)}
                            prefix={<Icon type=‘search‘/>}
                            suffix={<Icon type=‘close-circle‘
                            onClick={this.clearKeywordsMt.bind(this)}/>}/>
                    </div>
                    <Button onClick={this.getTableDataMt.bind(this,false)}
                            className=‘btnStyle‘
                            style={{marginRight: ‘10px‘}}>搜索</Button>
                </Content>
                {/* 列表区域 */}
                <Content style={contStyle}>
                    <Table {...tableConfig} rowKey={record => record.uid}/>
                </Content>
            </div>
        )
    }
}

export default (Welcome)

原文地址:https://www.cnblogs.com/zhujiasheng/p/9200594.html

时间: 2024-10-13 18:04:29

react AntUI(table组件使用案例)的相关文章

react.js table组件【可以直接使用】

最近在做一个CMS,使用的技术是刚刚学习的react.js,准备制作一个查询的页面以及一个新增的页面. 这是table的公共组件: 我们在使用的过程中,只会用到: 制作出来的查询页面: 新增页面: 上菜:

React中使用Ant Table组件

一.Ant Design of React http://ant.design/docs/react/introduce 二.建立webpack工程 webpack+react demo下载 项目的启动,参考 三.简单配置 1.工程下载下来之后,在src目录下新建目录“table”,新建app.js,内容如下. import React from 'react'; import ReactDOM from 'react-dom'; import ExampleTable from './Exam

使用 antd Table组件, 异步获取数据

使用React.js + Redux + antd 制作CMS 后台内容管理系统,分享一点点积累,欢迎讨论. 在this.state中初始化数据: this.state = { pageNum:1, /*翻页查询*/ pageSize:10, /*分页查询*/ activePage: 1, /*默认显示一页*/ selectedRowKeys: [], // 这里配置默认勾选列 loading: false, /*antd*/ selectedRow:[] } 在制作过程中,根据需要把antd的

Ant Table组件

http://www.cnblogs.com/hujunzheng/p/5689650.html React中使用Ant Table组件 v一.Ant Design of React http://ant.design/docs/react/introduce v二.建立webpack工程 webpack+react demo下载 项目的启动,参考 v三.简单配置 1.工程下载下来之后,在src目录下新建目录“table”,新建app.js,内容如下. import React from 're

微信小程序简易table组件实现

前提:微信小程序自1.6.3基础库版本库开始支持简洁组件,之前的版本因不支持,故在引用组件处默认为空节点.关于微信小程序已有模板为何还需构建组件?一是因为组件可以更方便的自定义并绑定行为,二是在其他页面引用时,无需通过import,只需在该页面json文件下配置usingComponents属性即可.(原本想在app.json文件里配置这个属性,从此一劳永逸,但目前貌似还不支持,至少我尝试的时候还不行-.-) 思路:主要是将table的head和tbody部分的数据抽象出来,使之只需要传值就可直

几款简单的 React Native UI 组件

本文推荐 11 个非常棒的 React Native 开源组件,希望能给移动应用开发者提供帮助. React Native 是近期 Facebook 基于 MIT 协议开源的原生移动应用开发框架,已经用于 Facebook 的生产环境.React Native 可以使用最近非常流行的 React.js 库来开发 iOS 和 Android 原生 APP. 1. iOS 表单处理控件 tcomb-form-native tcomb-form-native 是 React Native 强大的表单处

聊聊React高阶组件(Higher-Order Components)

使用 react已经有不短的时间了,最近看到关于 react高阶组件的一篇文章,看了之后顿时眼前一亮,对于我这种还在新手村晃荡.一切朝着打怪升级看齐的小喽啰来说,像这种难度不是太高同时门槛也不是那么低的东西如今可不多见了啊,是个不可多得的 zhuangbility的利器,自然不可轻易错过,遂深入了解了一番. 概述 高阶组件的定义 React 官网上对高阶组件的定义: 高阶部件是一种用于复用组件逻辑的高级技术,它并不是 React API的一部分,而是从React 演化而来的一种模式. 具体地说,

关于MUI v0.18.0版本 Table组件里的复选框不能选的解决方案

前段时间在用MUI的时候,Table组件出现复选框不能选的bug(描述: 点击复选框,点击事件会触发,复选框勾选状态无变化). 解决方法: 用CheckBox组件代替Table组件自带的复选框. 解决思路: 1.将CheckBox分为两种,一种是表头里的全选框(以下称全选框),一种是列表行里普通的复选框(以下称普通框): 2.将普通框进行单独封装(原因: 1.便于单个普通框自己管理自己的勾选状态,2.当全选框的勾选状态发生变化时,可以通过props将全选框的状态赋给它,从而实现全选的功能): 关

React jQuery公用组件celling的实现

目前较为流行的react确实有很多优点,例如虚拟dom,单向数据流状态机的思想.还有可复用组件化的思想等等.加上搭配jsx语法和es6,适应之后开发确实快捷很多,值得大家去一试.其实组件化的思想一直在提,原来的开发中也会抽一些公共的模块出来.但是react带来的思想冲击是革命性的,套用一句可能不太合适的话来,描述:万事万物皆组件,在这种思想的影响下,不管什么框架都可以抽一些公共的模块出来,应该秉持一种心态:任何代码都尽量不要重复写两遍,如果存在那么就可以考虑封装起来作为组件.当然不是一味的提倡盲