小编典典

将CSS类添加到wtform中的字段

css

我正在使用wtforms(和flask)生成动态表单。我想向正在生成的字段中添加一些自定义的CSS类,但是到目前为止,我一直无法这样做。使用在这里找到的答案,我尝试使用自定义小部件来添加此功能。它的实现方式与该问题的答案几乎完全相同:

class ClassedWidgetMixin(object):
  """Adds the field's name as a class.

  (when subclassed with any WTForms Field type).
  """

  def __init__(self, *args, **kwargs):
    print 'got to classed widget'
    super(ClassedWidgetMixin, self).__init__(*args, **kwargs)

  def __call__(self, field, **kwargs):
    print 'got to call'
    c = kwargs.pop('class', '') or kwargs.pop('class_', '')
    # kwargs['class'] = u'%s %s' % (field.name, c)
    kwargs['class'] = u'%s %s' % ('testclass', c)
    return super(ClassedWidgetMixin, self).__call__(field, **kwargs)


class ClassedTextField(TextField, ClassedWidgetMixin):
  print 'got to classed text field'

在View中,我这样做是为了创建字段(ClassedTextField是从表单导入的,而f是基本表单的实例):

  f.test_field = forms.ClassedTextField('Test Name')

表单的其余部分均已正确创建,但此jinja:

{{f.test_field}}

产生以下输出(无类):

<input id="test_field" name="test_field" type="text" value="">

任何提示都很好,谢谢。


阅读 580

收藏
2020-05-16

共1个答案

小编典典

实际上,您无需转到窗口小部件级别即可将HTML类属性附加到字段的呈现中。您可以使用class_jinja模板中的参数简单地指定它。

例如

    {{ form.email(class_="form-control") }}

将产生以下HTML ::

    <input class="form-control" id="email" name="email" type="text" value="">

要动态地执行此操作,例如,使用表单的名称作为HTML类属性的值,您可以执行以下操作:

Jinja:

    {{ form.email(class_="form-style-"+form.email.name) }}

输出:

    <input class="form-style-email" id="email" name="email" type="text" value="">
2020-05-16