向WTForms SelectField中的选项添加一个CSS类 [英] Add a CSS class to an option in a WTForms SelectField

问题描述

任何人都可以告诉我如何为css类指定选择值。
我想用小图片改变每个选择的背景，那么如何使用wtforms和css？

Can anyone please tell me how to assign css class to choices values. I would like to change the background of each choices with small image, so how can I do it with wtforms and 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')])

推荐答案

如果你仔细观察 WTForms ，你会发现一个小部件类 SelectField

If you look deep in the bowels of WTForms you'll find a widget class called SelectField

这是一个称为构建html字符串的方法：

this is the method called 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 函数。

this is __call__ method that invokes the render_options function defined above.

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 属性c $ c> SelectField 。当你这样做它隐式创建选项实例。在渲染时，这些隐式实例的 render_options 方法仅使用 val ， / code>和标签参数。

You are not going to be able to add the class attribute by simply instantiating a SelectField. When you do this it creates the Option instances implicitly. At render time the render_options methods of these implicit instances are only invoked with val, selected, and label arguments.

您可以在事实之后访问隐式的选项实例。这不是没有问题。如果你看看@ Johnston的例子：

You can access the implicit Option instances after the fact. This is not without issue. If you look at @Johnston's example:

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

他正在这样做。但是你必须在渲染时为类提供属性。调用 subchoice（** {'data-id'：i}）实际上输出了预期的 HTML 。如果你将 WTForms 与模板引擎集成，这会带来很多问题。因为像 jinja 的东西为你调用这些渲染函数。

He is doing exactly this. But you have to provide the attributes to the class at render time. The invocation subchoice(**{'data-id': i}) actually spits out the expected HTML. This poses quite the problem if you are integrating WTForms with a template engine. Because the something like jinja is calling these render functions for you.

如果你想要这种类型的行为，我建议你自己实现 SelectField ，允许你传递属性到隐式的 Option 实例中。这样模板引擎可以只是调用 render 的业务，你可以保持你的表单合并在你的 forms.py code>文件

If you want this type of behavior I would recommend writing your own implementation of SelectField that allows you to pass attributes into the implicit Option instances. This way the template engine can just go about the business of invoking render and you can keep your definitions of the form consolidated in your forms.py file(s)

这篇关于向WTForms SelectField中的选项添加一个CSS类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！