Flask-WTF制作复杂表单例子

需求分析

需要设计下图所示的一个表单,其中前三项基本表单内容很好整,但是后面的表格需要在渲染的时候就输出好指定单位列表,每个单位一行要采集的数据

渲染结果的HTML代码中为表格中每一行重复出现的表单控件的id和name属性自动进行编号

实现代码

"""
@Description : 问卷表单类
@File        : wenjuan.py
@Project     : investigation
@Time        : 2020/7/12 18:28
@Author      : Dexter
@Software    : PyCharm
"""
from flask_wtf import FlaskForm
from wtforms import StringField, SelectField, FieldList, FormField
from wtforms.validators import DataRequired


class QuestionField(FlaskForm):
    common_options = [(x, x) for x in ['满意', '不满意', '不了解']]
    danwei = StringField('单位')
    Q1 = SelectField('服务态度', choices=common_options)
    Q2 = SelectField('办事效率', choices=common_options)
    Q3 = SelectField('办理效果', choices=common_options)
    Q4 = SelectField('廉洁自律', choices=common_options)
    Q5 = StringField('意见建议')


class Wenjuan(FlaskForm):
    qylb_options = [(x, x) for x in ['工业类（含交通运输类）', '建筑类', '批零贸易类', '营利性服务业类', '农业龙头企业', '其它']]
    qyszd_options = [(x, x) for x in ['林州市', '安阳县', '汤阴县', '滑县', '内黄县', '文峰区（高新区）', '北关区', '殷都区', '龙安区']]
    qymc = StringField('1. 企业名称', validators=[DataRequired()])	# 企业名称
    qylb = SelectField('2. 企业类别', choices=qylb_options, validators=[DataRequired()])	# 企业类别
    qyszd = SelectField('3. 企业所在地', choices=qyszd_options, validators=[DataRequired()])	# 企业所在地
    question = FieldList(FormField(QuestionField))	# 表格中循环的问题

这里先定义了一个QuestionField类,用来构建表格中每行的重复表单控件. 然后定义Wenjuan类,其中的question字段使用了FieldList+FormField类型进行构造,具体作用:

FormField类型可以嵌套调用已定义的继承自FlaskForm类型的自定义表单作为字段使用
FieldList类型表示该字段是一个可以重复多条的列表对象

结构用图表描述如下:

视图部分代码:

"""
@Description : 视图蓝图
@File        : home.py
@Project     : investigation
@Time        : 2020/7/9 15:44
@Author      : Dexter
@Software    : PyCharm
"""
from flask import Blueprint, render_template, request
from common.wenjuan import Wenjuan

bp = Blueprint('home', __name__, url_prefix='/')

@bp.route('/pyjg', methods=['GET', 'POST'])
def pyjg():
    qy = ['市中级人民法院', '市人民检察院', '市发展改革委', '市教育局']
    # 实例化Wenjuan类对象
    wj_blank = Wenjuan()
    for q in qy:
        # 循环使用单位名称向实例化后的Wenjuan对象的question属性中追加项目,并将单位名称进行赋值
        wj_blank.question.append_entry(data={'danwei': q})
    if request.method == 'GET':
        return render_template('pyjg.html', wj=wj_blank)
    if request.method == 'POST':
        pass # 处理提交表单的操作

这里需要注意的是在向前端模板传递渲染表单变量之前根据已有的单位名单序列对实例化后的Wenjuan对象进行初始化部分数据的操作,for循环中将每个单位名称依次通过.append_entry()方法追加到question属性的值中.

前端模板:

这里用到了bootstrap-flask轮子中的render_form_row宏

{% from 'bootstrap/form.html' import render_form_row %}
<form action="" method="post" id="wj_form">
   {{ wj.csrf_token() }}
    <p class="title">
        调查表
    p>
    {{ render_form_row([wj.qymc]) }}
    {{ render_form_row([wj.qylb]) }}
    {{ render_form_row([wj.qyszd]) }}
    <table class="table table-bordered">
        <tr>
            <th>单位th>
            <th>服务态度th>
            <th>办事效率th>
            <th>办理效果th>
            <th>廉洁自律th>
            <th>意见建议th>
        tr>

        {% for q in wj.question %}
            <tr>
                <td>{{ q.danwei }}td>
                <td>{{ q.Q1 }}td>
                <td>{{ q.Q2 }}td>
                <td>{{ q.Q3 }}td>
                <td>{{ q.Q4 }}td>
                <td>{{ q.Q5 }}td>
            tr>
        {% endfor %}
    table>
    <input class="btn btn-primary" type="submit" value="提交并新增">
form>