form设置的数据怎么添加到table

form设置的数据怎么添加到table,第1张

页面代码

编辑跳转表单的代码:

<Tooltip title="编辑">

    <a onClick={this.showEditForm.bind(this,text)}><Icon type="edit"  style={{ fontSize: 18 }} /></a>

</Tooltip>

showEditForm=(text) =>{

        const data_save = this.props.signal.data_save.data

        const data_form = []

        for (let j=0 j<data_save.length j++) {

            for (let i=0 i<data_save[j].signal.length i++) {

                if(data_save[j].variety == text.variety){

                    this.setState({

                        okText: '保存',

                        modalVisible:true,

                        isCreate:false,

                        formTitle: '编辑交易信号'+' '+text.variety,

                        currentEditId:text.variety,

                        data_form: 

                            data_form.valueOf(

                                data_form.push({

                                    time:data_save[j].signal[i][0],

                                    signal:data_save[j].signal[i][1]

                                })

                            ),

                    })

                    /*console.log("data_form", data_form)*/

                    this.form.setFieldsValue({

                        ...data_form

                    })

                }

            }

            

        }

    }

表单代码:

import React from 'react'

import PropTypes from 'prop-types'

import { Table, Form, Card, Tooltip, Input, InputNumber, Radio, Modal,Select, Icon, Button, TimePicker } from 'antd'

import currencies from '../../common/currencies.js'

const FormItem = Form.Item

const format = 'HH:mm'

const AddSignal =(props) => {

  console.log("form",props)

  this.state ={

    data: props.data,

    loading: false,

  }

  console.log("state", this.state)

  const handleSubmit = (e) => {

    e.preventDefault()

    form.validateFields((err, values) =>{

      if(!err) {

          this.state.data.valueOf(this.state.data.push(values))

          console.log('form1', values, this.state.data)

      }

    })

  }

  const {visible, onCancel, onCreateOrSave, form, title, okText, initValues} = props

  const { getFieldDecorator } = form

  const clumn = [

  {

    title: '时间',

    dataIndex: 'time',

    width: 100,

    editable: true,

  },

  {

    title: '信号',

    dataIndex: 'signal',

    width: 120,

    editable: true,

  },

  {

    title: ' *** 作',

    dataIndex: 'action',

    width: 30,

    render: (text, record, index) => (

      <span>

        <Tooltip title="删除">

          <a style={{color:"red"}}>

              <Icon style={{ fontSize: 16}} type="delete" />

          </a>

        </Tooltip>

      </span>

    ),

  }]

  return (

    <Modal

      visible={visible}

      title={title}

      okText={okText}

      onCancel={onCancel}

      onOk={onCreateOrSave}>

        <Form layout="inline" onSubmit={handleSubmit}>

          <FormItem>

            {getFieldDecorator('time',{})(

            /*<TimePicker format={format} />*/<Input />

            )}

          </FormItem>

          <FormItem>

            {getFieldDecorator('signal',{})(

              <Select placeholder="请选择信号" style={{ width: 160}} >

                <Select.Option value="[开始]">[开始] </Select.Option>

              <Select.Option value="[结束]">[结束交易] </Select.Option>

              <Select.Option value="[集合]">[集合] </Select.Option>

              </Select>

            )}

          </FormItem>

          <FormItem><Button htmlType="submit" type="primary">新增</Button></FormItem>

        </Form>

        <Table rowKey='time' columns={clumn} dataSource={this.state.data} pagination={false} size="small" scroll={{y: 350}} />

    </Modal>

  )

}

export default Form.create()(AddSignal)

1、首先创建一个名称为 formphp的html文件

2、然后创建一form表单设置表单的name和action地址。

3、接着添加两个输入框分别设置name,一个数用户名,一个是性别输入框。

4、然后加入一个submit类型的输入框,再新建一个接受form表单数据的php文件act。

5、在act文件中加入接收提交数据的代码,并分别打印出代码。

6、最后在浏览器中打开文件,点击button查看效果,就完成了。


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/bake/11689864.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-18
下一篇 2023-05-18

发表评论

登录后才能评论

评论列表(0条)

保存