Definieren Sie CSS-Klasse in django Forms
-
03-07-2019 - |
Frage
Angenommen, ich habe ein Formular
class SampleClass(forms.Form):
name = forms.CharField(max_length=30)
age = forms.IntegerField()
django_hacker = forms.BooleanField(required=False)
Gibt es eine Möglichkeit für mich, CSS-Klassen für jedes Feld so zu definieren, dass ich dann jQuery basierend auf Klasse in meiner gerenderten Seite verwenden kann?
Ich habe gehofft, nicht zu haben, um das Formular manuell zu erstellen.
Lösung 2
meine eigene Frage beantwortet. Sigh
http: //docs.djangoproject .com / de / dev / ref / forms / Widgets / # django.forms.Widget.attrs
Ich wusste nicht, es wurde in das Widget-Konstruktor übergeben.
Andere Tipps
Noch eine andere Lösung, die Änderungen erfordert nicht in Python-Code und so ist besser für Designer und Einmal Präsentations Änderungen: django-widget-Tweaks . Hoffe, dass jemand es nützlich finden werden.
Hier ist ein andere Lösung für das Hinzufügen von Klassendefinitionen zu den Widgets nach den Feldern in der Klasse deklariert.
def __init__(self, *args, **kwargs):
super(SampleClass, self).__init__(*args, **kwargs)
self.fields['name'].widget.attrs['class'] = 'my_class'
Verwenden Sie django-widget-Tweaks , es ist einfach sehr gut zu bedienen und funktioniert.
Ansonsten kann dies einen eigenen Template Filter durchgeführt werden.
In Anbetracht Sie Ihr Formular auf diese Weise machen:
<form action="/contact/" method="post">
{{ form.non_field_errors }}
<div class="fieldWrapper">
{{ form.subject.errors }}
<label for="id_subject">Email subject:</label>
{{ form.subject }}
</div>
</form>
form.subject ist eine Instanz von Boundfield , die die as_widget Methode hat.
Sie können einen benutzerdefinierten Filter "addcss" in "my_app / templatetags / myfilters.py"
erstellenfrom django import template
register = template.Library()
@register.filter(name='addcss')
def addcss(value, arg):
css_classes = value.field.widget.attrs.get('class', '').split(' ')
if css_classes and arg not in css_classes:
css_classes = '%s %s' % (css_classes, arg)
return value.as_widget(attrs={'class': css_classes})
Und dann wenden Sie Ihre Filter:
{% load myfilters %}
<form action="/contact/" method="post">
{{ form.non_field_errors }}
<div class="fieldWrapper">
{{ form.subject.errors }}
<label for="id_subject">Email subject:</label>
{{ form.subject|addcss:'MyClass' }}
</div>
</form>
form.subjects wird dann mit der "MyClass" CSS-Klasse gemacht werden.
Hoffe diese Hilfe.
EDIT 1
-
Update-Filter nach dimyG 's Antwort
-
In django-widget-zwicken Link
EDIT 2
- Update-Filter nach Bhyd 's Kommentar
Aufbauend auf der Methode zeigte auf bei docs.djangoproject.com:
class MyForm(forms.Form):
comment = forms.CharField(
widget=forms.TextInput(attrs={'size':'40'}))
Ich dachte, es lästig war das native Widget-Typ für jedes Feld zu haben, zu wissen, und dachte, es lustig die Standardeinstellung außer Kraft setzen nur einen Klassennamen auf ein Formularfeld zu setzen. Dies scheint für mich zu arbeiten:
class MyForm(forms.Form):
#This instantiates the field w/ the default widget
comment = forms.CharField()
#We only override the part we care about
comment.widget.attrs['size'] = '40'
Dies scheint ein wenig sauberer zu mir.
Wenn Sie alle Felder im Formular wollen eine bestimmte Klasse zu erben, müssen Sie nur eine Elternklasse definieren, die von forms.ModelForm
erbt und dann von ihm erben
class BaseForm(forms.ModelForm):
def __init__(self, *args, **kwargs):
super(BaseForm, self).__init__(*args, **kwargs)
for field_name, field in self.fields.items():
field.widget.attrs['class'] = 'someClass'
class WhateverForm(BaseForm):
class Meta:
model = SomeModel
Das half mir die 'form-control'
Klasse alle Felder auf alle Formen von meiner Anwendung automatisch hinzuzufügen, ohne die Replikation von Code hinzufügen.
Hier ist einfach Art und Weise im Hinblick auf zu verändern. unten in Sicht hinzufügen, kurz bevor es in Vorlage übergeben.
form = MyForm(instance = instance.obj)
form.fields['email'].widget.attrs = {'class':'here_class_name'}
Sie einfach die Klassen zu Ihrem Formular hinzufügen, wie folgt.
class UserLoginForm(forms.Form):
username = forms.CharField(widget=forms.TextInput(
attrs={
'class':'form-control',
'placeholder':'Username'
}
))
password = forms.CharField(widget=forms.PasswordInput(
attrs={
'class':'form-control',
'placeholder':'Password'
}
))
Hier ist eine Variante der obigen, die allen Feldern die gleiche Klasse geben werden (zum Beispiel jquery schön abgerundete Ecken).
# Simple way to assign css class to every field
def __init__(self, *args, **kwargs):
super(TranslatedPageForm, self).__init__(*args, **kwargs)
for myField in self.fields:
self.fields[myField].widget.attrs['class'] = 'ui-state-default ui-corner-all'
Wenn Sie eine Klasse zu einem Formular-Feld in einer Vorlage hinzufügen möchten (nicht in view.py oder form.py) zum Beispiel in Fällen, die Sie 3rd party apps ändern wollen, ohne ihre Ansichten überschreiben, dann ein Template-Filter, wie in Charlesthk beantworten sehr bequem ist. Aber in dieser Antwort der Template Filter überschreibt alle vorhandenen Klassen, die das Feld Macht hat.
Ich habe versucht, dies als bearbeiten hinzuzufügen, aber es wurde vorgeschlagen, als eine neue Antwort geschrieben werden.
So, hier ist ein Template-Tag, das die vorhandenen Klassen des Feldes respektiert:
from django import template
register = template.Library()
@register.filter(name='addclass')
def addclass(field, given_class):
existing_classes = field.field.widget.attrs.get('class', None)
if existing_classes:
if existing_classes.find(given_class) == -1:
# if the given class doesn't exist in the existing classes
classes = existing_classes + ' ' + given_class
else:
classes = existing_classes
else:
classes = given_class
return field.as_widget(attrs={"class": classes})
Sie können versuchen, diese ..
class SampleClass(forms.Form):
name = forms.CharField(max_length=30)
name.widget.attrs.update({'class': 'your-class'})
...
Sie finden weitere Informationen in finden Sie unter: Django Widgets
Wie sich herausstellt Sie können dies tun, in Form Konstruktor ( init -Funktion) oder nach dem Formularklasse initiiert wurde. Dies wird manchmal benötigt, wenn Sie nicht Ihre eigene Form zu schreiben und diese Form kommt von woanders -
def some_view(request):
add_css_to_fields = ['list','of','fields']
if request.method == 'POST':
form = SomeForm(request.POST)
if form.is_valid():
return HttpResponseRedirect('/thanks/')
else:
form = SomeForm()
for key in form.fields.keys():
if key in add_css_to_fields:
field = form.fields[key]
css_addition = 'css_addition '
css = field.widget.attrs.get('class', '')
field.widget.attrs['class'] = css_addition + css_classes
return render(request, 'template_name.html', {'form': form})
Sie auch Django Knusprige Forms verwenden könnte, ist es eine große Werkzeug, um Formen für den Fall definieren Sie möchten einige CSS-Framework wie Bootstrap oder Stiftung verwenden. Und es ist leicht es Klassen für Ihre Formularfelder angeben.
Ihre Form Klasse möchte diese dann:
from django import forms
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Div, Submit, Field
from crispy_forms.bootstrap import FormActions
class SampleClass(forms.Form):
name = forms.CharField(max_length=30)
age = forms.IntegerField()
django_hacker = forms.BooleanField(required=False)
helper = FormHelper()
helper.form_class = 'your-form-class'
helper.layout = Layout(
Field('name', css_class='name-class'),
Field('age', css_class='age-class'),
Field('django_hacker', css-class='hacker-class'),
FormActions(
Submit('save_changes', 'Save changes'),
)
)