将CSS类添加到wtform中的字段

  • Z时代
  • 2024-01-10
  • 分类：问答

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

任何提示都很好，谢谢。

回答：

实际上，您无需转到窗口小部件级别即可将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="">

以上是 将CSS类添加到wtform中的字段 的全部内容， 来源链接： utcz.com/qa/411808.html

回到顶部