首页 > 解决方案 > 如何使用 WTForms 单独渲染单选按钮?

问题描述

我想要一个带有一组单选按钮的表单,每个单选按钮控制几个其他控件的启用,并且我希望其他控件与单选按钮穿插。简而言之,我想要这样的东西:

其中每个单选按钮启用其下方的控件。

问题是 Jinja2 想要将单选按钮呈现为一个组,它们之间没有任何内容;似乎没有一种干净的方式来引用各个按钮元素。

如何在 Jinja2 代码中呈现单个单选按钮?我正在使用 WTForms 2.3.3 和 Flask 2.0.1。

作为参考,这里是 FlaskForm:

def list_sellers():
    c1 = aliased(Contact)
    c2 = aliased(Contact)
    return db.session.query(c2).
        select_from(c1).join(c2, c2.id==c1.seller_id).
        filter(c1.seller_id != None)
    
class ExportForm(FlaskForm):
    filtered = BooleanField('Apply Filters')
    sellers_filter = RadioField(
        'Filter by Seller',
        choices=[
            ('all', 'All Sellers'),
            ('select', 'Select Seller'),
            ('none', 'No Seller')
        ],
        validators=[Optional()]
    )
    seller = QuerySelectField(
        'Seller',
        query_factory=list_sellers,
        allow_blank=False,
        validators=[Optional()],
        render_kw={'class': 'form-select'},
    )
    submit = SubmitField('Download')

标签: flaskjinja2flask-wtformswtforms

解决方案


我有一些工作,但恕我直言,这真的很难看:

{% for subfield in form.sellers_filter %}
  {% if subfield.id.endswith('0') %}
    <div class="form-group col-4">
      {{ subfield.label }} {{ subfield }}
    </div>
  {% endif %}
  {% if subfield.id.endswith('1') %}
    <div class="form-group col-4">
      {{ subfield.label }} {{ subfield }}
      {{ form.seller }}
    </div>
  {% endif %}
  {% if subfield.id.endswith('2') %}
    <div class="form.group col-4">
      {{ subfield.label }} {{ subfield }}
    </div>
  {% endif %}
{% endfor %}

推荐阅读