模板上的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() ，我遍歷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中了解有關自定義窗口小部件的更多信息。