Fusion Design组件编写表格例子

 

 

import React from 'react';
import ReactDOM from 'react-dom';

import { Tab, Table, Button, Dialog, Form , Input, Checkbox} from '@alifd/next';
import '@alifd/next/dist/next.css';
import data from './data';

console.log(data)
const tabs = [
   { tab: '全部', key: 'all' },
   { tab: '审核中', key: 'review' },
   { tab: '已发布', key: 'released' },
   { tab: '已拒绝', key: 'rejected' },
 ];

const FormItem = Form.Item;

const formItemLayout = {
   labelCol: {
      fixedSpan: 5
   },
   wrapperCol: {
      span: 8
   }
}
 

class TableTab extends React.Component{


   constructor(props){
      super(props);
      this.state = {
         dataSource: data,
         tabKey: 'all',
         visible: false,
         record: {
            'title':'1',
            'author':'2',
            'date':'3',
            'status':'4'
         }
       };

       this.deleteRecord = this.deleteRecord.bind(this);

   }

   //打开对话框
   onOpen = (item) => {
      //  console.log(item)
      this.setState({
         visible: true
      });
   };

   //关闭对话框
   onClose = ( ) => {
      this.setState({
         visible: false
      });
   };
 
   // tabs的切换
   handleTabStatus = function(key){
      // console.log(key)
      this.setState({
         tabKey: key
      });

   }

   //onRowClick 点击  获取每一行的数据
   getRow(item){
      this.setState({
         record: {
            'title': item.title,
            'author': item.author,
            'date': item.date,
            'status': item.status
         }
      })
   }


 

   //删除
   deleteRecord(item){
      // console.log(typeof item)
      // console.log(item.title)
      // console.log(this.state.dataSource.all.length)
      
      console.log(123)


      //获取属于那个类型
      let type = this.state.tabKey
      
      //删除每一条记录
      for(let i=0;i<this.state.dataSource[type].length;i++){
         if(this.state.dataSource[type][i].title == item.title){
            this.state.dataSource[type].splice(i,1)
            break;
         }
      }

   }

   render(){
      const { dataSource, record } = this.state;
      console.log(1)
      return (
         <div>
            <Tab shape='pure'   onChange={this.handleTabStatus.bind(this)}  >
               { tabs.map( item => <Tab.Item title={item.tab} key={item.key}>
                     <Table dataSource={dataSource[this.state.tabKey]} onRowClick={ this.getRow.bind(this) }>
                        <Table.Column title="标题" dataIndex="title"/>
                        <Table.Column title="作者" dataIndex="author" />
                        <Table.Column title="状态" dataIndex="status"/>
                        <Table.Column title="状态" dataIndex="date"/>
                        <Table.Column title="操作" cell={ <span> <Button type="primary"  onClick={   this.onOpen}  >编辑</Button>

                        <Dialog
                           title="编辑"
                           visible={this.state.visible}
                           onOk={this.onClose.bind(this, 'okClick')}
                           onCancel={this.onClose.bind(this, 'cancelClick')}
                           onClose={this.onClose}>


                           <Form style={{width: '400px', height: '200px'}}  {...formItemLayout}  >
                              <FormItem label="标题:">
                                 <Input  name="title" value={record.title} placeholder="请输入标题" />
                              </FormItem>

                              <FormItem label="作者:">
                                 <Input  name="author" value={record.author} placeholder="请输入作者姓名"/>
                              </FormItem>

                              <FormItem label="状态:">
                                 <Input  name="status" value={record.status} placeholder="请输入状态"/>
                              </FormItem>

                              <FormItem label="发布时间:">
                                 <Input  name="data" value={record.date}  placeholder="请输入发布时间"/>
                              </FormItem>
                              
                           </Form>
                        </Dialog>
                           
 
                         <Button warning   style={ { margin: '10px' } }   onClick={ () => this.deleteRecord(this.state.record)     }  >删除</Button></span> 
                        } dataIndex="id"/>
                        
 
                     </Table>
               </Tab.Item> ) }
            </Tab>
         </div>
      );
      
   }
 

}
   

 ReactDOM.render(   
    <TableTab />  

 , document.getElementById('root') )