将CSS类添加到WTForms SelectField中的选项

Question

任何人都可以告诉我如何将css类分配给选择值.我想用小图像改变每个选项的背景,那么我怎么能用wtforms和css做呢？

class RegisterForm(Form):
    username = TextField('username', [validators.Length(min=3, max=50), validators.Required()])
    img_url = SelectField('avatar', 
            choices=[('static/images/avatars/1.jpg', '1'), 
                ('static/images/avatars/2.jpg', '2'),
                ('static/images/avatars/3.jpg', '3'), 
                ('static/images/avatars/4.jpg', '4'),
                ('static/images/avatars/5.jpg', '5'), 
                ('static/images/avatars/6.jpg', '6'),
                ('static/images/avatars/7.jpg', '7'), 
                ('static/images/avatars/8.jpg', '8'),
                ('static/images/avatars/9.jpg', '9'), 
                ('static/images/avatars/10.jpg','10')])

Answer 1

如果你深入了解WTForms你会发现一个名为的小部件类SelectField

这是名为build the html string的方法:

@classmethod
def render_option(cls, value, label, selected, **kwargs):
    options = dict(kwargs, value=value)
    if selected:
        options['selected'] = True
    return HTMLString('<option %s>%s</option>' % (html_params(**options), escape(text_type(label))))

这是__call__调用render_options上面定义的函数的方法.

def __call__(self, field, **kwargs):
    kwargs.setdefault('id', field.id)
    if self.multiple:
        kwargs['multiple'] = True
    html = ['<select %s>' % html_params(name=field.name, **kwargs)]
    for val, label, selected in field.iter_choices():
        html.append(self.render_option(val, label, selected))
    html.append('</select>')
    return HTMLString(''.join(html))

您无法class通过简单地实例化来添加属性SelectField.执行此操作时,它会Option隐式创建实例.在渲染时将render_options这些隐式实例方法只与调用val,selected和label论据.

您可以在Option事后访问隐式实例.这不是没有问题.如果你看@ Johnston的例子:

>>> i = 44
>>> form = F()
>>> for subchoice in form.a:
...     print subchoice(**{'data-id': i})
...     i += 1

他正是这样做的.但是你必须在渲染时为类提供属性.调用subchoice(**{'data-id': i})实际上吐出了预期的HTML.如果要WTForms与模板引擎集成,这会带来很大的问题.因为像是jinja在为你调用这些渲染函数.

如果您想要这种类型的行为,我建议您编写自己的实现,SelectField以便将属性传递给隐式Option实例.通过这种方式,模板引擎可以进行调用业务,render您可以将您的表单定义合并到您的forms.py文件中