SelectField WTForm渲染模板

时间:2015-11-18 17:24:36

标签: python flask jinja2 wtforms flask-wtforms

我在一个简单的表格场渲染上已经挣扎了将近一天。如果你可以帮助我,那将是很好的。

我正在使用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>

使用此代码,我可以获得预期的显示,但是没有值从该字段传递。无论我选择哪个值,在提交后,只有默认值。

1 个答案:

答案 0 :(得分:2)

我最近做了类似的事情,用循环来迭代所有的选择。 基本上,我已经创建了一个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

中详细了解自定义小部件