import React from 'react';import ReactDom from 'react-dom';import ExampleTable from './ExampleTable.jsx' ReactDom.render(  <ExampleTable/>,  document.getElementById('AppRoot'));

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) {//  構造函數    super(props);    this.state = {      dataSource:[        { key: 1, nid:1, name: 'tab', gender:'男' , age: 22, schoolname: '第一中學', description: '熱愛班級活動，尊敬老師'},        { key: 2, nid:2, name: 'shift', gender:'男' , age: 22, schoolname: '第一中學', description: '熱愛班級活動，尊敬老師'},        { key: 6, nid:6, name: 'ctrl', gender:'男' , age: 22, schoolname: '第一中學', description: '熱愛班級活動，尊敬老師'},        { key: 4, nid:4, name: 'caps lock', gender:'男' , age: 22, schoolname: '第一中學', description: '熱愛班級活動，尊敬老師'},        { key: 5, nid:5, name: 'enter', gender:'女' , age: 22, schoolname: '第一中學', description: '熱愛班級活動，尊敬老師'}      ],      index : '',      PersonCount :0,      selectedRowKeys:[],      selectedRows:[],      record : 'abc'    };    this.onDelete = this.onDelete.bind(this);//綁定this,聲明該方法需要綁定this, 直接在onClick中調用    this.appendPerson = this.appendPerson.bind(this);    this.handleSelectedDelete = this.handleSelectedDelete.bind(this);    this.columns = [      { title: '編號', 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: '學校', dataIndex: 'schoolname', key: 'schoolname',width:'15%' },      { title: '在校表現', dataIndex: 'description', key: 'description' ,width:'20%'},      { title: '操作', dataIndex: '', key: 'operation', width:'32%',render: (text,record,index)=>(        <span>           <Popconfirm                <a                  <Icon type="delete"/></a>           </Popconfirm>          <span className="ant-divider"/>          <UserDetails className="user_details" pass={record}/>        </span>      ) },    ];    }   appendPerson(event){//得到子元素傳過來的值    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();//對遍歷得到的數組進行排序    let MaxData = sortData[(this.state.dataSource.length)-1]//取最后一位下標的值    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() {    //聯動選擇框    const rowSelection = {      onChange: (selectedRowKeys, selectedRows) => {        this.setState({//將選中的id和對象存入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;

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中定義一個AddUser類   constructor(props){//構造函數     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();//清空提交的表單         //當值傳遞到父元素后，通過回調函數觸發appendPerson方法將參數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        <Form onSubmit={this.handleSubmit}>          <FormItem {...formItemLayout} label = "用戶名" hasFeedback>            {getFieldDecorator('name', {              rules:[{                required:true,message:'請輸入您的 name！'              }]            })(              <Input placeholder="請輸入您的用戶名！"/>            )}            </FormItem>          <FormItem {...formItemLayout} label="性別" hasFeedback>            {getFieldDecorator('gender',{              rules:[{                required:true,message:'請輸入您的 gender！'              }]            })(              <Select placeholder="請選擇您的性別">                <Option value="男">男</Option>                <Option value="女">女</Option>              </Select>        )}          </FormItem>          <FormItem {...formItemLayout} label="年齡" hasFeedback>            {getFieldDecorator('age',{              rules:[{required:true,message:'請選擇您的 Age'              }]            })(              <Select placeholder="請選擇你您的年齡">                  <Option value="26">26</Option>                  <Option value="27">27</Option>                  <Option value="28">28</Option>              </Select>            )}          </FormItem>          <FormItem {...formItemLayout} label="就讀學校" hasFeedback>            {getFieldDecorator('schoolname',{              rules:[{required:true,message:'請輸入您的就讀學校'}]            })(              <Input placeholder="請輸入您的就讀學校！"/>            )}          </FormItem>          <FormItem {...formItemLayout} label="在校表現" hasFeedback>            {getFieldDecorator('description',{              rules:[{required:true,message:'請輸入您的在校表現'}]            })(              <Input type="textarea" rows={3} placeholder="請輸入您的在校表現!"/>            )}          </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無法定義; export default AddUser;

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            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>就讀學校：  {this.props.pass.schoolname}</p>          <p>在校表現：  {this.props.pass.description}</p>        </Modal>      </div>    )  } } export default UserDetails;

#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;}