python - SelectField WTForm 在模板上渲染

Question

我已经在表单字段的简单渲染上苦苦挣扎了近一天。如果您能在这方面帮助我，那就太好了。

我正在使用 Flask-WTF，python 2.7。

我正在尝试使用自定义 ListWidget 呈现 SelectField。该字段基本上必须在 UL HTML 标记内呈现，而不是 SELECT html 标记，这似乎是我正在努力解决的问题。

这就是我的自定义小部件类:

widget.py

class CustomListWidget(ListWidget):

    def __init__(self, *args, **kwargs):
        super(CustomListWidget, self).__init__(*args, **kwargs)

    def __call__(self, field, **kwargs):
        kwargs.setdefault('id', field.id)
        html = ['<{} {}>'.format(self.html_tag, html_params(**kwargs))]
        for subfield in field:
            html.append('<li><span>{}</span></li>'.format(subfield()))
        html.append('</{}>'.format(self.html_tag))
        return HTMLString(''.join(html))

这就是我的表单的外观，类别字段是我正在努力解决的问题。

form.py

from widget import CustomListWidget
from wtforms import SelectField, SubmitField


widget = CustomListWidget(html_tag='ul')

class MyForm(Form):
    category = SelectField('category', [DataRequired()], widget=widget, default='1', choices=[
        ('1', 'whatever'),
        ('2', 'whatever2')
    ])
    submit = SubmitField('Search')

view.py

from form import MyForm
from flask import render_template

@app.route('/formtest', methods=['GET', 'POST'])
def formtest():
    form = MyForm()
    if request.method == 'GET':
        render_template('form.html', form=form)

    if form.validate_on_submit():
        return redirect(url_for('whatever', data=-form.data))
    return 'form not validated'

form.html

<div class="search-input with-dropdown">
    <div class="dropdown">
       {{ form.category(class='dropdown-content hide') }} }}
    </div>
</div>

使用此代码，我能够获得预期的显示，但没有从该字段传递任何值。无论我选择哪个值，提交后都只有默认值。

Answer 1

我最近做了类似的事情，用一个循环来迭代所有的选择。基本上，我创建了一个 SelectMultipleField 副本以拥有自己的 html，因为我们需要特定的内容。

正如您在下面的片段中看到的，我迭代了 field.iter_choices()。

{%- if field.type in ['SelectMultipleField'] %}
    <ul>
    {% for key, value, checked in field.iter_choices() %}
        <li>{{ value }}</li>
    {% endfor %}
    </ul>
{%- endif %}

您可以在http://wtforms.simplecodes.com/docs/0.6/widgets.html中阅读有关自定义小部件的更多信息。