Django: Ajout de classes CSS lors du rendu des champs de formulaire dans un modèle

Question

Je génère des champs d'un formulaire dans un modèle comme celui-ci {{ form.first_name }} et je voudrais y ajouter une classe (par exemple, span-x -class de blueprint). J'aimerais donc savoir s'il existe une solution prête à l'emploi (filtre de modèle) pour cela, que je pourrais utiliser à la mode {{ form.first_name|add_class:"span-4" }} ? (Je veux juste savoir si les développeurs de Django ou quelqu'un ont déjà pensé à cela à mon insu avant de le faire moi-même)

Answer 1

Il vous suffit d'installer Django widget_tweaks

 pip install django-widget-tweaks
 

Après vous pouvez faire quelque chose comme ça sur votre modèle:

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

-

Lisez tout à ce sujet ici .

Answer 2

Pour résoudre ce problème, j'ai créé mon propre filtre de modèle, vous pouvez l'appliquer sur n'importe quelle balise, pas seulement sur les éléments d'entrée!

 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

Quelques notes supplémentaires sur la façon de démarrer avec Lazerscience est très pratique. Voici comment le fichier ressemble avec dépendance des importations:

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

J'ai collé dans un fichier appelé add_class.py. La structure de répertoire est: mydjangoproject > general_tools_app > templatetags > add_class.py

general_tools_app est une application qui recueille des fonctionnalités utiles comme ce que j'ajoute à nouveau django projets.

(Le general_tools_app et templatetags répertoires à la fois vide __init__.py le fichier de sorte qu'ils obtiennent correctement enregistrés)

Dans settings.py mon INSTALLED_APPS tuple comprend l'entrée 'mydjangoproject.general_tools_app'.

Pour utiliser le filtre dans un modèle, j'ai ajouter la ligne {% load add_class %} dans le haut du fichier. Si je veux ajouter la classe 'supprimer' pour un champ, je le ferais

{{ myfield|add_class:'delete' }}

Answer 4

J'apprends toujours Django, mais tu ne pourrais pas faire quelque chose comme ça -

 from django import forms

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

Je suppose qu'il n'est pas nécessaire de le faire au niveau du modèle (ou d'utiliser des filtres), sauf si vous avez une exigence que je n'ai pas comprise.

Answer 5

Encore une note de sur lazerscience la solution: si vous appliquez cela à un <select> élément sans attribut de classe, la chaîne de remplacer, dans l'autre cas serait de produire quelque chose comme ceci:

<select name="state" id="id_state" class="class1 class2">
    <option value="AL" class="class1 class2">Alabama</option class="class1 class2">
    <option value="AK" class="class1 class2">Alaska</option class="class1 class2">
    <option value="AZ" class="class1 class2">Arizona</option class="class1 class2">
</select class="class1 class2">

Je suis sûr que les navigateurs de la ferraille ceux étrangères définitions de classe, mais c'est beaucoup de cordes remplace quand vous avez seulement besoin d'un. Facile de remédier à cela:

return mark_safe(string.replace('>', ' class="%s">' % css_class, 1))

Ce dernier argument (1) s'assurer que seule la première occurrence de ">" sera remplacé par "classe="...">, ce qui est logiquement correct pour chaque élément de formulaire.