Django:在模板中渲染表单字段时添加CSS类

Question

我正在这样的模板中输出表单的字段,{{ form.first_name }}我想添加一个类(例如蓝图的span-x -class).所以我想知道是否有一个很好的现成解决方案(模板过滤器),我可以在时尚中使用{{ form.first_name|add_class:"span-4" }}？(我只是想知道Django的开发人员或任何人在我自己做之前是否已经想到了这个但我不知道)

Answer 1

您只需要安装Django widget_tweaks

pip install django-widget-tweaks

在您可以在模板上执行类似操作之后:

{{ form.search_query|attr:"type:search" }}

-

在这里阅读所有相关信息.

Answer 2

为了解决这个问题,我制作了自己的模板过滤器,你可以将它应用于任何标签,而不仅仅是输入元素!

class_re = re.compile(r'(?<=class=["\'])(.*)(?=["\'])')
@register.filter
def add_class(value, css_class):
    string = unicode(value)
    match = class_re.search(string)
    if match:
        m = re.search(r'^%s$|^%s\s|\s%s\s|\s%s$' % (css_class, css_class, 
                                                    css_class, css_class), 
                                                    match.group(1))
        print match.group(1)
        if not m:
            return mark_safe(class_re.sub(match.group(1) + " " + css_class, 
                                          string))
    else:
        return mark_safe(string.replace('>', ' class="%s">' % css_class))
    return value

Answer 3

关于如何使用Lazerscience非常方便的解决方案的一些额外说明.以下是依赖导入文件的外观:

import re
from django.utils.safestring import mark_safe
from django import template
register = template.Library()

class_re = re.compile(r'(?<=class=["\'])(.*)(?=["\'])')
@register.filter
def add_class(value, css_class):
    string = unicode(value)
    match = class_re.search(string)
    if match:
        m = re.search(r'^%s$|^%s\s|\s%s\s|\s%s$' % (css_class, css_class, 
                                                    css_class, css_class), 
                                                    match.group(1))
        print match.group(1)
        if not m:
            return mark_safe(class_re.sub(match.group(1) + " " + css_class, 
                                          string))
    else:
        return mark_safe(string.replace('>', ' class="%s">' % css_class))
    return value

我将其粘贴到名为add_class.py的文件中.目录结构是:mydjangoproject> general_tools_app> templatetags> add_class.py

general_tools_app是一个应用程序,它收集这些有用的功能,我将其添加到新的django项目中.

(general_tools_app和templatetags目录都有一个空__init__.py文件,以便正确注册)

在settings.py中,我的INSTALLED_APPS元组包含条目'mydjangoproject.general_tools_app'.

要在模板中使用过滤器,我{% load add_class %}在文件顶部添加该行.如果我想将"删除"类添加到字段中,我会这样做

{{ myfield|add_class:'delete' }}

Answer 4

另一种方法是as_widget在字段上使用该方法来改变它 - 比正则表达式方法更简单,更安全,并且不需要任何其他依赖项.

定义自定义模板过滤器:

@register.filter
def add_class(field, class_name):
    return field.as_widget(attrs={
        "class": " ".join((field.css_classes(), class_name))
    })

在您的模板中:

{{ form.first_name|add_class:"span-4" }}

您还可以使用as_widget添加其他属性,例如placeholder等.

Answer 5

我还在学习Django,但是你不能这样做 -

from django import forms

class SomeForm(forms.Form):
    f = forms.CharField(label='x',widget=forms.TextInput(attrs={'class':'name'}))

我想在模板级别(或使用过滤器)没有必要这样做,除非你有一些我不明白的要求.