精华内容
下载资源
问答
  • 如下图,在表单中,根据后台返回值确定行数,每一行都是一个Form表单,提交表单时,每一行为对象`{购药日期:’ ‘,购药支数:’ ‘,号码:’ ‘,来源:’ '},最终形式 购药发票记录:[ {id:1,购药日期:'...

    描述:

    如下图,在表单中,根据后台返回值确定行数,每一行都是一个Form表单,提交表单时,每一行为对象`{购药日期:’ ‘,购药支数:’ ‘,号码:’ ‘,来源:’ '},最终形式

    购药发票记录:[
    				{id:1,购药日期:' ',购药支数:' ',号码:' ',来源:' '},
    				{id:2,购药日期:' ',购药支数:' ',号码:' ',来源:' '}
    			 ]
    

    在这里插入图片描述
    参考:根据 ant design 官网案例 表单的数据存储到上层组件 有疑问请参考官网

    import React, { PureComponent, Fragment } from 'react';
    import moment from 'moment';
    import { connect } from 'dva';
    import { Card, Table, Tabs, Form, Col, Row, Input, Select, Button, DatePicker ,Modal ,Divider} from 'antd';
    import { emptyVal, defaultPageSize ,getApproveType ,getApprovestatus} from '../../utils/utils';
    import styles from './Audit.less';
    import FooterToolbar from '../../components/FooterToolbar';
    
    const FormItem = Form.Item;
    const TabsPane = Tabs.TabPane;
    const { Option } = Select;
    
     let obj = {};              //重要!!!!!
    
    @connect(({ audit, loading }) => ({
      audit,
      loading: loading.models.audit,
      submitting: loading.effects['form/submitAdvancedForm'],
    }))
    @Form.create()
    
    //线上审核组件
    export default class OnlineForm extends PureComponent {
      state ={
        invoice:[],//存购药发票记录 重要!!!!!
      }
      
      componentWillReceiveProps() {
        this.setState({
          invoice:this.props.detailData&&this.props.detailData.invoiceList?this.props.detailData.invoiceList:[]
        })
      }
      
      handleLookOk =(event)=>{ //外层表单提交方法,可以不看
        const { validateFields } = this.props.form;
        const { handleLookCancel } = this.props
        event.preventDefault()
        validateFields((err, values) => {
          let val ={
            id:this.props.detailData.PresentVisitVo.id,
            data:this.state.invoice,
            token:localStorage.getItem('token')
          }
          console.log(this.props.detailData)
          console.log({...values , ...val})
          if (!err) {
            this.props.dispatch({
              type: 'audit/onlineAuditSubmit',
              payload: {...values , ...val},
            }).then(()=>{
              handleLookCancel()
              this.props.dispatch({ //线上
                type: 'audit/onlineAudit',
                payload: {
                  rows: defaultPageSize,
                  page: 1,
                  givetype:0,
                  queryType:1,
                },
              });
            })
          }
        });
      }
    
      handleFormChange = (changedFields ,val) => {      //重要!!!!!
      	//内层表单,根据操作的form的index,修改并赋值对应的input
      	//val 即 当前操作form的index ,changedFields  即 当前操作form的input
        const { invoice } = this.state   
        let invoiceArr = invoice
        if(changedFields['invoicedate']){ 
          obj['index'+val]={ invoicedate:changedFields['invoicedate'].value }
         }
         if(changedFields['nainvoiceqtyme']){ 
          obj['index'+val]={ nainvoiceqtyme:changedFields['nainvoiceqtyme'].value, }
         }
         if(changedFields['invoiceno']){ 
          obj['index'+val]={ invoiceno:changedFields['invoiceno'].value }
         }
         if(changedFields['invoicesource']){ 
          obj['index'+val]={ invoicesource:changedFields['invoicesource'].value }
         }
         invoiceArr[val] = {...invoiceArr[val] ,...obj['index'+val]} 
        this.setState({
          invoice:invoiceArr
        })
      }
      disabledDate=(current)=>{ //今天以前不可选择
        return current < moment().endOf('day').subtract(1, "days");
      }
      
      render(){
      //父组件传值 detailData =详情  timestampToTime = 时间转化 handleLookCancel=关闭弹窗 returnNull = 判断返回空 onlyLook = 只读
        const { detailData ,timestampToTime ,handleLookCancel ,returnNull ,onlyLook} = this.props;
        const { getFieldDecorator, getFieldValue } = this.props.form;
        const { invoice} = this.state
    
        const CustomizedForm = Form.create({            //重要!!!!!
        
          onFieldsChange(props, changedFields) {
            props.onChange(changedFields);
          },
          
          mapPropsToFields(props) {
            console.log(props.invoicedate) 
            return {
                invoicedate: Form.createFormField({
                  value:  props.invoicedate?moment(timestampToTime(props.invoicedate), "YYYY-MM-DD"):'',
                }),
                nainvoiceqtyme: Form.createFormField({
                  value: props.nainvoiceqtyme,
                }) ,
                invoiceno: Form.createFormField({
                  value: props.invoiceno,
                }),
                invoicesource: Form.createFormField({
                  value: props.invoicesource,
                })  ,
            };
          },
          onValuesChange(_, values) {
            console.log(values);
          },
        })((props) => {
          //此处尤为重要,添加后,表单验证由每个动态创建form自己监管。不添加由外层form监管。
          const { getFieldDecorator } = props.form; 
          return (
            <Row>
              <Form >
                <Col span={3}><img className={styles.img} src={props.invoiceurl} onClick={()=>window.open(props.invoiceurl)}/></Col>
                <Col span={5}>
                  <Form.Item style={{width:'200px'}}>
                    {getFieldDecorator('invoicedate', {
                      rules: [{ required: true, message: 'invoicedate is required!' }],
                    })(
                      <DatePicker 
                          format="YYYY-MM-DD"
                          placeholder="请选择"
                          disabledDate={this.disabledDate}
                        />
                      )}
                  </Form.Item>
                </Col>
                <Col span={4}>
                  <Form.Item style={{width:'150px'}}>
                    {getFieldDecorator('nainvoiceqtyme', {
                      rules: [{ required: true, message: 'nainvoiceqtyme is required!' }],
                    })(<Input  style={{lineHeight:'80px'}}/>)}
                  </Form.Item>
                </Col>
                <Col span={5}>
                  <Form.Item style={{width:'200px'}}>
                    {getFieldDecorator('invoiceno', {
                      rules: [{ required: true, message: 'invoiceno is required!' }],
                    })(<Input />)}
                  </Form.Item>
                </Col>
                <Col span={6}>
                  <Form.Item style={{width:'200px'}}>
                    {getFieldDecorator('invoicesource', {
                      rules: [{ required: true, message: 'invoicesource is required!' }],
                    })(
                      <Select style={{width:'200px'}}>
                        <Select.Option value="门诊">门诊</Select.Option>
                        <Select.Option value="住院">住院</Select.Option>
                        <Select.Option value="药店">药店</Select.Option>
                      </Select>
                    )}
                  </Form.Item>
                </Col>
              </Form>
            </Row>
          );
        });
    
        return (
          <Form  onSubmit={this.handleLookOk}> //外层From
                    <Row>
                      <Col span={24}><span style={{lineHeight:'40px'}}>购药发票记录:</span>{}</Col>
                    </Row>
                    <Row>
                      <Col span={3}>发票</Col><Col span={5}>购药日期</Col>
                      <Col span={4}>购药支数</Col><Col span={5}>凭证号码</Col><Col span={6}>来源</Col>
                    </Row>
                    { //循环加载内层 From
                      invoice.map((item,i)=>(<CustomizedForm {...item} onChange={(e)=>this.handleFormChange(e,i)} />))
                    }
                    <FooterToolbar>
                      <Button type="primary" onClick={handleLookCancel} offset={16}>返回</Button>
                      <Button type="primary" onClick={this.handleLookOk} hidden={onlyLook} offset={20}>提交</Button>
                    </FooterToolbar>
                </Form>
        );
      }
    }
    

    没有了:

    感受:其实感觉vue操作表单比react方便
    过年篇:昨天我弟被逼着相亲了,回来苦瓜脸,洗洗就睡了。我妈说成了,就定亲结婚。我在那笑,我妈说你要是敢拆台,他没事,你就有事了,慌了。

    展开全文
  • 描述: 如下图,最终形式 testQuestionOptionList:[ { quesOption: '1', flag:...参考:根据 ant design 官网案例 表单的数据存储到上层组件 有疑问请参考官网 import React, { PureComponent, Fragment } from 'r...

    描述:

    如下图,最终形式

    testQuestionOptionList:[
    		{ quesOption: '1', flag: 'A'},
    		{ quesOption: '2', flag: 'B'}
    ]
    

    在这里插入图片描述

    参考:根据 ant design 官网案例 表单的数据存储到上层组件 有疑问请参考官网

    import React, { PureComponent, Fragment } from 'react';
    import moment from 'moment';
    import { connect } from 'dva';
    import { Card, Table, Tabs, Form, message, DatePicker , Input, Select, Button ,Divider,Modal ,Pagination ,Icon ,Upload ,Popconfirm} from 'antd';
    import FooterToolbar from '../../../components/FooterToolbar';
    
    import { emptyVal, defaultPageSize ,img ,API} from '../../../utils/utils';
    let obj = {};              //重要!!!!!
    const FormItem = Form.Item;
    const TabsPane = Tabs.TabPane;
    const { Option } = Select;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 21 },
      },
    };
    
    @connect(({ testQuestions, loading ,}) => ({
      testQuestions,
      loading: loading.models.testQuestions,
      submitting: loading.effects['form/submitAdvancedForm'],
    }))
    @Form.create()
    export default class EditArticle extends PureComponent {
      state = {
        testQuestionOptionList:[{quesOption:'',flag:'A'}],//存选项 重要!!!!!
        eg:['A','B','C','D'],//限制最多录四个
        page:1,
        id:'',
    
      };
    
      componentDidMount() {
        const { testQuestions: { txt } } = this.props;
        if(txt&&txt.testQuestionOptionList.length !=0){
          this.setState({
            testQuestionOptionList:txt.testQuestionOptionList
          })
        }
        
      }
    
      handleCancel = (e) => {
        const { popHide } = this.props
        popHide()
      }
    
      onValidateForm = () => {
        const { validateFields } = this.props.form;
        const { popHide , editId} = this.props
        
        validateFields((err, values) => {
          if(editId){
            values.id = editId
          }
          values.testQuestionOptionList = this.state.testQuestionOptionList
          if (!err) {
            this.props.dispatch({
              type: 'testQuestions/newOne',
              payload: values,
            }).then(()=>{
              this.props.form.resetFields() 
              popHide()
              this.props.dispatch({
                type: 'testQuestions/getQuestionList',
                payload: {
                  rows: defaultPageSize,
                  page: 1,
                },
              });
            })
          }
        });
      }
    
      //录入问题答案-开始
      handleFormChange = (changedFields ,val) => {      //重要!!!!!
      	//内层表单,根据操作的form的index,修改并赋值对应的input
      	//val 即 当前操作form的index ,changedFields  即 当前操作form的input
        const { testQuestionOptionList } = this.state   
        let testQuestionOptionListArr = testQuestionOptionList
         if(changedFields['quesOption']){ 
          obj['index'+val]={ quesOption:changedFields['quesOption'].value ,flag:changedFields['quesOption'].flag}
         }
         testQuestionOptionListArr[val] = {...testQuestionOptionListArr[val] ,...obj['index'+val]} 
        this.setState({
          testQuestionOptionList:testQuestionOptionListArr
        })
        console.log(testQuestionOptionListArr)
      }
      remove=(index)=>{
        console.log('del',index)
        const { testQuestionOptionList } = this.state
        let arr = [...testQuestionOptionList]
        arr.splice(index,1)
        this.setState({
          testQuestionOptionList:arr
        })
      }
      add=(index)=>{
        //testQuestionOptionList:[{quesOption:''}],
        
        const { testQuestionOptionList ,eg} = this.state
        let arr = [...testQuestionOptionList]
        if(arr.length>=4){
          message.info('最多四个!')
          return false
        }
        arr.push({quesOption:'',flag:eg[arr.length]})
        this.setState({
          testQuestionOptionList:arr
        })
        console.log('add',testQuestionOptionList)
      }
      //录入问题答案-结束
    
    
      render() {
        const { testQuestions: { data ,txt }, loading, form } = this.props;
        const { validateFields ,getFieldDecorator} = form;
        const { testQuestionOptionList ,eg} = this.state;
    
        const formItemLayout = {
          labelCol: {
            xs: { span: 24 },
            sm: { span: 4 },
          },
          wrapperCol: {
            xs: { span: 24 },
            sm: { span: 16 },
          },
        };
            //录入问题 -开始
            const CustomizedForm = Form.create({            //重要!!!!!    
              onFieldsChange(props, changedFields) {
                props.onChange(changedFields);
              },     
              mapPropsToFields(props) {           
                const { index } = props
                console.log(eg[index]) 
                return {
                  quesOption: Form.createFormField({
                      value: props.quesOption,
                      flag:eg[index]
                    }),
                    
                };
              },
              onValuesChange(_, values) {
                console.log(values);
              },
            })((props) => {
              const { getFieldDecorator } = props.form;
              const { index } = props
              return (
                  <Form >
                      <Form.Item label='选项' {...formItemLayout}>
                        {getFieldDecorator('quesOption', {
                          rules: [{ required: true, message: 'quesOption is required!' }],
                        })(<Input style={{width:'95%'}}/>)}
                        {testQuestionOptionList.length > 1&&index>0 ? (
                          <Icon
                            className="dynamic-delete-button"
                            type="minus-circle-o"
                            style={{ fontSize: '20px' ,position:'absolute',top:'-1px',marginLeft:'10px'}}
                            disabled={testQuestionOptionList.length === 1}
                            onClick={() => this.remove(index)}
                          />
                        ) : (
                          <Icon
                            className="dynamic-delete-button"
                            type="plus-circle-o"
                            style={{ fontSize: '20px' ,position:'absolute',top:'-1px',marginLeft:'10px'}}
                            disabled={testQuestionOptionList.length === 1}
                            onClick={() => this.add(index)}
                          />
                        )}
                      </Form.Item>
        
                  </Form>
              );
            });
            //录入问题-结束
    
        return (
          <div>
            <Card bordered={false}>
                <Form onSubmit={this.onValidateForm}>
                <Form.Item label='问题标题' {...formItemLayout}>
                  {getFieldDecorator('question', {
                    rules: [{ required: true, message: '请输入' }],
                    initialValue:txt?txt.testQuestion.question:'' ,
                  })(
                    <Input></Input>
                  )}
                </Form.Item>
                { //循环加载内层 From
                  testQuestionOptionList.map((item,i)=>(<CustomizedForm {...item} index = {i} onChange={(e)=>this.handleFormChange(e,i)} />))
                }
                <Form.Item label='正确答案' {...formItemLayout}>
                  {getFieldDecorator('answerFlag', {
                    rules: [{ required: true, message: '请输入' }],
                    initialValue:txt?txt.testQuestion.answerFlag:'',
                  })(
                    <Select>
                      {testQuestionOptionList.map((item)=>(<Option value={item.flag}>{item.flag}</Option>))}
                    </Select>
                  )}
                </Form.Item>
                <Form.Item label='答案解析' {...formItemLayout}>
                  {getFieldDecorator('analysis', {
                    rules: [{ required: true, message: '请输入' }],
                    initialValue:txt?txt.testQuestion.analysis:'' ,
                  })(
                    <Input></Input>
                  )}
                </Form.Item>
                <Form.Item label='问题类型' {...formItemLayout}>
                  {getFieldDecorator('type', {
                    rules: [{ required: true, message: '请输入' }],
                    initialValue:txt?txt.testQuestion.type+'':'',
                  })(
                    <Select>
                      <Option value="1">文章类问题</Option>
                      <Option value="2">测试类问题</Option>
                    </Select>
                  )}
                </Form.Item>
    
                <div span={24} style={{ textAlign: 'right' }}>
                  <Button type="primary" onClick={this.handleCancel} offset={16}>返回</Button>
                  <Button type="primary" onClick={this.onValidateForm} style={{ marginLeft: 8 }} offset={20}>提交</Button>
                </div>
    
              </Form>
            </Card>
          </div>
        );
      }
    }
    
    

    没有了:

    结尾:后台服务启动了,不说了,改需求去了。

    展开全文
  • //内层表单,根据操做formindex,修改并赋值对应input //val 即 当前操做formindex ,changedFields 即 当前操做forminput const { invoice } = this.state let invoiceArr = invoice if(changedFields['...

    import React, { PureComponent, Fragment } from 'react';

    import moment from 'moment';

    import { connect } from 'dva';

    import { Card, Table, Tabs, Form, Col, Row, Input, Select, Button, DatePicker ,Modal ,Divider} from 'antd';

    import { emptyVal, defaultPageSize ,getApproveType ,getApprovestatus} from '../../utils/utils';

    import styles from './Audit.less';

    import FooterToolbar from '../../components/FooterToolbar';

    const FormItem = Form.Item;

    const TabsPane = Tabs.TabPane;

    const { Option } = Select;

    let obj = {}; //重要!!!!!

    @connect(({ audit, loading }) => ({

    audit,

    loading: loading.models.audit,

    submitting: loading.effects['form/submitAdvancedForm'],

    }))

    @Form.create()

    //线上审核组件

    export default class OnlineForm extends PureComponent {

    state ={

    invoice:[],//存购药发票记录 重要!!!!!

    }

    componentWillReceiveProps() {

    this.setState({

    invoice:this.props.detailData&&this.props.detailData.invoiceList?this.props.detailData.invoiceList:[]

    })

    }

    handleLookOk =(event)=>{ //外层表单提交方法,能够不看

    const { validateFields } = this.props.form;

    const { handleLookCancel } = this.props

    event.preventDefault()

    validateFields((err, values) => {

    let val ={

    id:this.props.detailData.PresentVisitVo.id,

    data:this.state.invoice,

    token:localStorage.getItem('token')

    }

    console.log(this.props.detailData)

    console.log({...values , ...val})

    if (!err) {

    this.props.dispatch({

    type: 'audit/onlineAuditSubmit',

    payload: {...values , ...val},

    }).then(()=>{

    handleLookCancel()

    this.props.dispatch({ //线上

    type: 'audit/onlineAudit',

    payload: {

    rows: defaultPageSize,

    page: 1,

    givetype:0,

    queryType:1,

    },

    });

    })

    }

    });

    }

    handleFormChange = (changedFields ,val) => { //重要!!!!!

    //内层表单,根据操做的form的index,修改并赋值对应的input

    //val 即 当前操做form的index ,changedFields 即 当前操做form的input

    const { invoice } = this.state

    let invoiceArr = invoice

    if(changedFields['invoicedate']){

    obj['index'+val]={ invoicedate:changedFields['invoicedate'].value }

    }

    if(changedFields['nainvoiceqtyme']){

    obj['index'+val]={ nainvoiceqtyme:changedFields['nainvoiceqtyme'].value, }

    }

    if(changedFields['invoiceno']){

    obj['index'+val]={ invoiceno:changedFields['invoiceno'].value }

    }

    if(changedFields['invoicesource']){

    obj['index'+val]={ invoicesource:changedFields['invoicesource'].value }

    }

    invoiceArr[val] = {...invoiceArr[val] ,...obj['index'+val]}

    this.setState({

    invoice:invoiceArr

    })

    }

    disabledDate=(current)=>{ //今天之前不可选择

    return current < moment().endOf('day').subtract(1, "days");

    }

    render(){

    //父组件传值 detailData =详情 timestampToTime = 时间转化 handleLookCancel=关闭弹窗 returnNull = 判断返回空 onlyLook = 只读

    const { detailData ,timestampToTime ,handleLookCancel ,returnNull ,onlyLook} = this.props;

    const { getFieldDecorator, getFieldValue } = this.props.form;

    const { invoice} = this.state

    const CustomizedForm = Form.create({ //重要!!!!!

    onFieldsChange(props, changedFields) {

    props.onChange(changedFields);

    },

    mapPropsToFields(props) {

    console.log(props.invoicedate)

    return {

    invoicedate: Form.createFormField({

    value: props.invoicedate?moment(timestampToTime(props.invoicedate), "YYYY-MM-DD"):'',

    }),

    nainvoiceqtyme: Form.createFormField({

    value: props.nainvoiceqtyme,

    }) ,

    invoiceno: Form.createFormField({

    value: props.invoiceno,

    }),

    invoicesource: Form.createFormField({

    value: props.invoicesource,

    }) ,

    };

    },

    onValuesChange(_, values) {

    console.log(values);

    },

    })((props) => {

    //此处尤其重要,添加后,表单验证由每一个动态建立form本身监管。不添加由外层form监管。

    const { getFieldDecorator } = props.form;

    return (

    window.open(props.invoiceurl)}/>

    {getFieldDecorator('invoicedate', {

    rules: [{ required: true, message: 'invoicedate is required!' }],

    })(

    format="YYYY-MM-DD"

    placeholder="请选择"

    disabledDate={this.disabledDate}

    />

    )}

    {getFieldDecorator('nainvoiceqtyme', {

    rules: [{ required: true, message: 'nainvoiceqtyme is required!' }],

    })()}

    {getFieldDecorator('invoiceno', {

    rules: [{ required: true, message: 'invoiceno is required!' }],

    })()}

    {getFieldDecorator('invoicesource', {

    rules: [{ required: true, message: 'invoicesource is required!' }],

    })(

    门诊

    住院

    药店

    )}

    );

    });

    return (

    //外层From购药发票记录:{}发票购药日期购药支数凭证号码来源

    { //循环加载内层 From

    invoice.map((item,i)=>(this.handleFormChange(e,i)} />))

    }

    返回

    提交

    );

    }

    }

    展开全文
  • 只是做个笔记记录下 在一些项目中会出现动态数据的存储,例如存储某个房屋租客信息,有时候一个房屋有一个租客也有可能有两个、三个、四个。 平常在数据库中会用一个字段来存储一个方便...提交后的数据数组格式array

    只是做个笔记记录下

    在一些项目中会出现动态数据的存储,例如存储某个房屋租客信息,有时候一个房屋有一个租客也有可能有两个、三个、四个。

    平常在数据库中会用一个字段来存储一个方便读取和处理,那么如果有一百个岂不是要一百个字段?

    用数组表单提交数据,处理转化为序列化数据存入一个字段中


    表单中模板


    <input type="text" name="zk[name]">

    <input type="text" name="zk[phone]">


    <input type="text" name="zk[name2]">

    <input type="text" name="zk[phone2]">


    <input type="text" name="zk[name3]">

    <input type="text" name="zk[phone3]">


    提交后的数据数组格式array:


    var_dump($_POST ); 既可查看到post过来的数组 ,

    当然了html中也可以使用二维数组 <input type="text" name="zk[phone3][truename]"> <input type="text" name="zk[phone3][nickname]">


    "zk"=>{

    'name'=>xxxx,

    'phone'=>xxxx,

    'name2'=>xxxx,

    'phone2'=>xxxx,

    'name3'=>xxxx,

    'phone3'=>xxxx,

    }


    最后再把zk这个数组序列化(a:3:{s:1:"s";d:0;s:1:"d";d:0;s:1:"r";d:0;})或是转换成json存储在字段中,读取的时候逆向转换为数组既可


    最好建议是序列化,毕竟json转换成array麻烦,当然了还是看需求情况




    展开全文
  • 在我们一些系统里面,有时候会需要一些让用户自定义的数据信息,一般这些可以使用扩展JSON进行存储,不过每个业务表的显示项目可能不一样,因此需要根据不同的表单进行设计,然后进行对应的数据存储。本篇随笔结合...
  • :spiral_shell: 动态表单引擎(和数据存储),基于Electron构建 项目设置 在上构建triton-forms是一个典型nodeJS应用程序,我们假设您已经熟悉了此技术,否则会有有用链接 对于OSX用户,建议通过Homebrew...
  • 使用动态表单接收与存储信息

    千次阅读 热门讨论 2013-11-28 10:00:03
    在此,我们再次明确一下动态表单的使用的条件:假设现在有多条流程,每一条流程都需要不同形式的表单。   这里,我们分成两大步:为该流程添加所需的动态表单和将动态表单中数据存储到数据库 1、为某项流程添加...
  • I am new to MongoDB, but am looking at it to solve this problem:My application has a dynamic form builder that lets users create custom surveys, contact forms, etc. I want to log all of the form submi...
  • 数据库竖表存储的优势
  • 最近的一个项目,由于客户的需求等信息不确定,为了降低以后修改的成本及产品的...在团队讨论这个问题的时候,想到了这样的一个解决方法,将数据的存储由横向变为纵向,通过这种方法我们实现了动态的数据保存!!!...
  • 利用在线编辑器设计的表单,包含输入框,明细表(动态添加行)等需要存储到数据库信息,现在有三种思路:1.一个表单对应数据库一张或多张物理表(主从表),这种设计在很多业务情况下,其数据库物理表会不断膨胀...
  • 这里写自定义目录标题功能实现...在表单设置一个空数组用来存储每次表单提交的数据,将数据加入到原有的初始数据数组中,更新数组 将更新后的数据通过消息订阅与发布机制传递给表格组件,表格组件setState更新数据从而
  • 这对于创建以数据为中心业务应用程序特别有用,在该应用程序中,模式是灵活,需要存储在数据库中。 这在表单动态的且不能进行硬编码其他情况下也很有用。 该项目类似于 。 Alpha版本免责声明 React-...
  • 响应式表单:使用FormGroup, FormControl,FormArray,FormBuilder 等类构建出的数据对象就是响应式的表单,可动态删除或添加控件。 模板驱动表单:使用ngModel、ngForm进行双向绑定。 项目结构如图: array-slave....
  • 觉得博文有用,请点赞,请评论,请关注,谢谢!~ 最近项目中实现多图提交,尝试了base...先上GIF动态图,看个效果,如果符合你项目或者确定你要了解内容,再往下看吧: 完整项目下载地址:http://download.csdn
  • <p>I have a "working" inventory program that I'm trying to update. Currently, I have to go to several pages and add items to each one for entry into the database.... <p>I made a dynamic tip entry ...
  • 最近的一个项目,由于客户的需求等信息不确定,为了降低以后修改的成本及产品的...在团队讨论这个问题的时候,想到了这样的一个解决方法,将数据的存储由横向变为纵向,通过这种方法我们实现了动态的数据保存!!!...
  • 动态表单分析

    2012-05-31 19:52:53
    java动态表单,在网上看了一些方案。自己也设计了一下。 供大家指点参考。 由于我们采用hibernate和MyIbatis执久层原故,每一个表需要一个VO,这样,动态生成表后,VO无法生成,当时做罢!在 团队...
  • React的form表单的动态生成

    千次阅读 2019-09-30 17:02:09
    需求: 根据工资项来增加不同的工资项,然后根据不同的工资项动态生成from表单,来进行用户工资的增删改查。 分析: 现在做的功能是在增加工资项...这样操作会简单一点,也方便自己的数据存取,和修改,你要修改那一...
  • java里的动态表单技术

    万次阅读 2009-09-16 21:58:00
    最近的一个项目,由于客户的需求等信息不确定,为了降低以后修改的成本及产品的推广...在团队讨论这个问题的时候,想到了这样的一个解决方法,将数据的存储由横向变为纵向,通过这种方法我们实现了动态的数据保存!!!
  • 1.一个表单对应数据库一张或多张物理表(主从表),这种设计在很多业务情况下,其数据库物理表会不断膨胀,同时,当修改表单时,其对应物理表结构也需要修改,当物理表有很多数据时,改变物理表scheme会锁表...
  • 动态表单绘制完毕后由后台解析并存储到数据库,可以自己手动添加定制宏组件。 数据库主要只有2张表,但是会动态地创建表单数据的表,表单越多,创建出来表越多。 以下是目前此项目一些截图: 下载地址: ....
  • 1.使用表单(form)获得数据。 从表单中获取数据有很多方法,推荐使用JQuery方法formObj.serializeArray(); 使用该方法获得数据是一个数组,形式如下 0: {name: "title", value: "银翼"} 1:…… 2:…… …… 将...
  • el-form 中表单 动态prop 验证

    千次阅读 2020-03-30 19:43:27
    el-form 中 表单动态prop 验证 某天接到个需求: 1.管理页面数据时,个别字段值需要支持多语言 2.整个页面数据只能是一份 于是就是只能把form中对应字段改成对象格式 form: any = { name: "", url: "", title...
  • 此次开发需要用到动态生成多行表单,因为新老数据要兼顾,老数据是对象存储一个接口,新数据多行配置,对象数组存储,走另一个接口,所以在展示上就需要区分下。 注意这里默认了第一行不能删除,当然你也...
  • 链表相比于前几个章节讲的数据结构而言... 首先我们了解一下什么是链表,链表将数据存储在一种单独的数据结构中,这个结构通常叫做“节点”,对于链表来说,节点通常只有两部分内容,e:存储的数据,next:链表中的...
  • 链表数据表构建需要预先知道数据大小来申请连续存储...定义链表(Linked list)是一种常见基础数据结构,是一种线性表,但是不像顺序表一样连续存储数据,而是在每一个节点(数据存储单元)里存放下一个节点...
  • 这个项目要求是我需要使用mysql 5.7,以便我可以使用json数据类型来存储/检索json数据.我很好.我知道,有可能使用HQL.但我无法弄清楚如何使用对象关系映射实现Hibernate?有任何想法吗 ?提前致谢 !解决方法:最近我...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 541
精华内容 216
关键字:

动态表单的数据存储