將CSS類添加到WTForms SelectField中的選項

任何人都可以請告訴我如何將css類分配給選項值。我想改變每個選擇與小圖像的背景，所以我怎麼能與wtforms和CSS呢？將CSS類添加到WTForms SelectField中的選項

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')])

來源

2014-04-11 Max

如果您在WTForms腸子仔細端詳，你會發現稱爲widget類SelectField

這就是所謂的構建HTML字符串的方法：

@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))

你是不是要能夠通過簡單的實例化一個SelectField添加class屬性。當你這樣做時，它會隱式創建Option實例。在渲染時，這些隱式實例的render_options方法只能使用val,selected和label參數來調用。

事實之後，您可以訪問隱含的Option實例。這不是沒有問題。如果你看@約翰斯頓的例子：

>>> 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文件中

來源

2014-05-01 00:40:03 nsfyn55

我只是想讓您知道，沒有猴子修補或重寫wtforms。庫代碼確實支持它，雖然不是非常簡單。我發現了這一點，因爲我和你有同樣的問題，我試圖爲WTForms寫一個修復程序，並自己提交了一個PR，後來發現你可以做到這一點（我花了好幾天的時間來解決這個問題）：

>>> from wtforms import SelectField, Form 
>>> class F(Form): 
... a = SelectField(choices=[('a', 'Apple'), ('b', 'Banana')]) 
... 
>>> i = 44 
>>> form = F() 
>>> for subchoice in form.a: 
...  print subchoice(**{'data-id': i}) 
...  i += 1 
... 
<option data-id="44" value="a">Apple</option> 
<option data-id="45" value="b">Banana</option>

在這裏看到的康沃：
https://github.com/wtforms/wtforms/pull/81

來源

2014-05-06 18:53:37 Johnston

將CSS類添加到WTForms SelectField中的選項

回答

相關問題