使用javascript在表中动态添加wtforms字段并发回查看

编程问答 2022-08-15

问题描述

我需要在flask-wtforms中动态添加多个fiedlist，然后将其发送回数据库。这个想法是用户添加他的详细信息，然后可以添加许多行。我能够使用jquery在表中添加行，但是我对如何真正将其发送回视图并进入数据库感到迷茫。它适用于一行，但当行数更多时，它仅删除其他行，并将第一行保留在其中。任何帮助将不胜感激。

Picture 1 Picture 2

forms.py 

class subProdData(FlaskForm):
      itemnmbr = StringField('Item number/Job Description',validators=[Datarequired()])
      jobStart = TimeField('Job Start time',validators=[Datarequired()])
      jobEnd = TimeField('Job End Time',validators=[Datarequired()])
      qty = IntegerField('Qty',validators=[Datarequired()])
      employee = IntegerField('Employees Id Number',validators=[Datarequired()])



class prodData1(FlaskForm):
     date = DateField('Date',format='%Y-%m-%d',validators=[Datarequired()])
     department = SelectField('Department:',validators=[Datarequired()])
     shift = SelectField('Shift:',choices=[(1),(2)],validators=[Datarequired()])
     supervisor = SelectField('Supervisor',validators=[Datarequired()])
     employeesNum = IntegerField('# of employees:')
     notes = TextAreaField('Notes:',validators=[Length(min=0,max=140)])
     jobInfo = FieldList(FormField(subProdData),min_entries=1)
     submit = SubmitField('Submit')

addForm.html 

<form method="POST">
{{ form.csrf_token }}
<div class="container">
<div class="content-section">
<h1>Add Data Report</h1>
    <br/>
  <div class="form-group required" id="supervisor"><label class="control-label">{{form.supervisor.label}}
      {{ form.supervisor(class_='form-control')}}</div>
  <div class="form-group required" id="shift"><label class="control-label">{{form.shift.label}}
      {{ form.shift(class_='form-control')}}</div>
  <div class="form-group required" id="date"><label class="control-label">{{form.date.label}}
      {{ form.date(class_='form-control')}}</div>
  </div>

  <div class="formdepartment" id="shift"><label class="control-label">{{form.department.label}}
      {{ form.department(class_='form-control')}}</div>
  <div class="formdepartment" id="employee"><label class="control-label">{{form.employeesNum.label}}
      {{ form.employeesNum(class_='form-control')}}</div>

  <div class="Notes">
    <div class="formnotes" id="notes"><label class="control-label">{{form.notes.label}}
        {{ form.notes(class_='form-control')}}</div>
  </div>

<div data-toggle="fieldset" id="job-fieldset" class="form-group">
  <table class="ui table" id="tab1">
    <thead>
      <th>Item #/Job Description</th>
      <th>Job Start Time</th>
      <th>Job End Time</th>
      <th>Qty</th>
      <th>Employees ID Number</th>
    </thead>
    <tbody>
    {% for e in form.jobInfo %}
      <tr data-toggle="fieldset-entry">
        <td>{{ e.itemnmbr(class_='form-control') }}</td>
        <td>{{ e.jobStart(class_='form-control') }}</td>
        <td>{{ e.jobEnd(class_='form-control') }}</td>
        <td>{{ e.qty(class_='form-control') }}</td>
        <td>{{ e.employee(class_='form-control') }}</td>
      </tr>
    {% endfor %}
    </tbody>
  </table>
</div>

</div>
{{form.submit}}


<input type="button" value="add entry" id="add">
</form>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<script>
$(document).ready(function(){

$("#add").click(function(e){
event.preventDefault()
$('#tab1').append('{% for e in form.jobInfo %}<tr data-toggle="fieldset-entry"><td> 
{{e.itemnmbr(class_='form-control')}}</td><td>{{e.jobStart(class_='form-control')}}</td><td> 
{{e.jobEnd(class_='form-control')}}</td><td>{{e.qty(class_='form-control')}}</td><td> 
{{e.employee(class_='form-control')}}</td>{% endfor %}');
});



});


</script>


{% endblock %}

routes.py 

@app.route('/prodData/add',methods=['GET','POST'])
@login_required
def addProd():

form = prodData1(depData=current_user.username)

if form.validate_on_submit():
    data1 = (str(form.date.data),str(form.department.data),int(form.shift.data),str(form.supervisor.data),int(form.employeesNum.data),int(form.employee.data),str(form.itemnmbr.data),str(form.jobStart.data),str(form.jobEnd.data),int(form.qty.data),str(form.notes.data) )
    try:
        sendProdData1(*data1)
        flash('Submitted')
    except Error as e:
        print(e)
        flash('error')
    return redirect(url_for('prodData'))
return render_template('addProd1.html',form=form)

sendToDB.py 

def sendProdData1(*args):
cursor2 = conn.cursor()
cursor2.execute(
"""INSERT INTO [dbo].[prodInput](input_date,department,shift,supervisor,number_of_employees,employee_id,item_number,job_start,job_end,produced_qty,notes)
   VALUES (?,?,?)""",args )

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

flaskflask-wtformsjavascriptpythonwtforms