当前位置： 移动技术网 > IT编程>网页制作>Html5 > 后台表格管理

后台表格管理

2018年08月27日  | 移动技术网IT编程  | 我要评论

弗卡白金牡蛎,陆川县中学,888达人

import react, { component } from 'react';
import '../assets/css/app.css';
import '../assets/css/myone.css';
import 'element-theme-default';

import { button,table } from 'element-react';


class myone extends component {

    constructor(props) {
        super(props);
        this.state = {
            columns: [
                {
                    type: 'selection'
                },
                {
                    label: "id",
                    prop: "uid",
                    width: 160
                },
                {
                    label: "姓名",
                    prop: "nickname",
                    width: 160
                },
                {
                    label: "手机号码",
                    prop: "cellphone",
                    width: 160
                },
                {
                    label: "日期",
                    prop: "times",
                    width: 160
                },
                {
                    label: "手机号码",
                    prop: "cellphone",
                    width: 160
                },
                {
                    label: "操作",
                    fixed: 'right',
                    render: (row, column, index) => {
                        return <span><button type="text" size="small" onclick={this.deleterow.bind(this, index)}>移除</button></span>
                    }
                },
                {
                    label: "操作",
                    fixed: 'right',
                    render: (row, column, index) => {
                        return <span><button type="text" size="small" onclick={this.selectrow.bind(this, row.uid)}>查看</button></span>
                    }
                },
                {
                    label: "操作",
                    fixed: 'right',
                    render: (row, column, index) => {
                        return <span><button type="text" size="small" onclick={this.updaterow.bind(this, row.uid)}>修改</button></span>
                    }
                }
            ],
            data: [],
            list:[],
            username:[],
            password:[],
            phone:[]
        }
    }
    deleterow(index) {
        const { data } = this.state;
        data.splice(index, 1);
        this.setstate({
            data: [...data]
        })
    }

    createrow(){
        fetch(' http://fxc.glbuys.com/api/admin/users/add?token=79cee06eb8a4e0b489',{
            method: 'post',
            mode:'cors',
            headers: {
                'content-type': 'application/x-www-form-urlencoded'
            },
            body:"cellphone="+this.state.phone+"&password="+this.state.password+"&nickname="+this.state.username
        }).then(res=>{
            return res.json();
        }).then(json=>{
            console.log(json);
            if(json.code==200){
                window.location.reload()
            }
        })
    }


    selectrow(uid){
        fetch('http://fxc.glbuys.com/api/admin/users/details?uid='+uid+'&token=79cee06eb8a4e0b489',{
            method:'get'
        }).then((res)=>{
            return res.json();
        }).then((json)=>{
            if(json.code==200){
                this.setstate({list:json.data},()=>{
                    console.log(this.state.list.nickname)
                })
            }
        })
    }

    updaterow(uid){
        fetch('http://fxc.glbuys.com/api/admin/users/details?uid='+uid+'&token=79cee06eb8a4e0b489',{
            method:'get'
        }).then((res)=>{
            return res.json();
        }).then((json)=>{
            if(json.code==200){
                this.setstate({
                    name:json.data.nickname,
                    phone:json.data.cellphone,
                    uid:json.data.uid
                })

            }
        })
    }
    updatealt(uid){
        fetch('http://fxc.glbuys.com/api/admin/users/mod?token=79cee06eb8a4e0b489',{
            method:'post',
            mode:'cors',
            headers:{
                'content-type': 'application/x-www-form-urlencoded'
            },
            body:"uid="+uid+"&cellphone="+this.state.phone+"&password="+this.state.password+"&nickname="+this.state.username
        }).then((res)=>{
            return res.json();
        }).then((json)=>{
            if(json.code==200){
                window.location.reload()
            }
        })
    }


    componentdidmount() {
        fetch('http://fxc.glbuys.com/api/admin/users/lists?page=1&token=79cee06eb8a4e0b489', {
            method: 'get'
        }).then((res) => {
            return res.json();
        }).then((json) => {
            if(json.code==200){
                this.setstate({data:json.data},()=>{
                    // console.log(this.state.data)
                })
            }
        })

    }



  render() {
    return (
      <div classname="myone">


          <table

              columns={this.state.columns}
              data={this.state.data}
              border={true}
              height={250}
              onselectchange={(selection) => { console.log(selection) }}
              onselectall={(selection) => { console.log(selection) }}
          />
            <from>
                昵称：<input type="text" defaultvalue={this.state.name} onchange={e=>{this.setstate({username:e.target.value})}}/><br/>
                密码：<input type="password" onchange={e=>{this.setstate({password:e.target.value})}}/><br/>
                手机号：<input type="text" defaultvalue={this.state.phone} onchange={e=>{this.setstate({phone:e.target.value})}}/><br/>
                <button type="button" onclick={this.createrow.bind(this)}>注册</button>
                <button type="button" onclick={this.updatealt.bind(this,this.state.uid)}>修改</button>
            </from>




      </div>
    );
  }
}
export default myone;

 

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网