Django 양식에서 CSS 클래스를 정의하십시오
https://stackoverflow.com/questions/401025
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
내가 양식이 있다고 가정합니다
class SampleClass(forms.Form):
name = forms.CharField(max_length=30)
age = forms.IntegerField()
django_hacker = forms.BooleanField(required=False)
각 필드에서 CSS 클래스를 정의하여 렌더링 된 페이지에서 클래스를 기반으로 jQuery를 사용할 수 있도록 각 필드에서 CSS 클래스를 정의 할 수있는 방법이 있습니까?
양식을 수동으로 만들 필요가 없기를 바랐습니다.
해결책 2
내 자신의 질문에 대답했습니다. 한숨을 쉬다
http://docs.djangoproject.com/en/dev/ref/forms/widgets/#django.forms.widget.attrs
나는 그것이 위젯 생성자로 전달되었다는 것을 몰랐다.
다른 팁
파이썬 코드의 변경이 필요하지 않은 또 다른 솔루션은 디자이너와 일회성 프리젠 테이션 변경에 더 좋습니다. django-widget-tweaks. 누군가가 유용하다는 것을 알기를 바랍니다.
다음은 클래스의 필드를 선언 한 후 위젯에 클래스 정의를 추가하는 또 다른 솔루션입니다.
def __init__(self, *args, **kwargs):
super(SampleClass, self).__init__(*args, **kwargs)
self.fields['name'].widget.attrs['class'] = 'my_class'
사용 django-widget-tweaks, 사용하기 쉽고 잘 작동합니다.
그렇지 않으면 사용자 정의 템플릿 필터를 사용하여 수행 할 수 있습니다.
이런 식으로 양식을 렌더링하는 것을 고려하십시오.
<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는의 인스턴스입니다 바운드 필드 거기에 as_widget 방법.
"my_app/templatetags/myfilters.py"에서 사용자 정의 필터 "addcss"를 만들 수 있습니다.
from 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})
그런 다음 필터를 적용하십시오.
{% 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는 "MyClass"CSS 클래스로 렌더링됩니다.
이 도움을 바랍니다.
편집 1
에 따라 필터를 업데이트하십시오 디그대답
django-widget-tweak 링크를 추가하십시오
편집 2
- 에 따라 필터를 업데이트하십시오 bhyd댓글
docs.djangoproject.com에서 지적 된 방법에 대한 확장 :
class MyForm(forms.Form):
comment = forms.CharField(
widget=forms.TextInput(attrs={'size':'40'}))
나는 모든 필드에 대한 기본 위젯 유형을 알아야하는 것이 번거 롭다고 생각했고, 폼 필드에 클래스 이름을 넣기 위해 기본값을 무시하는 것이 재미 있다고 생각했습니다. 이것은 나에게 효과가있는 것 같습니다.
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'
이것은 나에게 조금 더 깨끗해 보인다.
양식의 모든 필드가 특정 클래스를 상속하기 위해 원하는 경우 부모 클래스를 정의하는 경우 forms.ModelForm, 그런 다음 상속합니다
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
이것은 내가 추가하는 데 도움이되었습니다 'form-control' 코드 복제를 추가하지 않고 내 응용 프로그램의 모든 형태에있는 모든 필드에 대한 클래스.
다음은 간단한 방법을 바꾸는 방법입니다. 템플릿에 전달하기 직전에 아래에 추가하십시오.
form = MyForm(instance = instance.obj)
form.fields['email'].widget.attrs = {'class':'here_class_name'}
다음과 같이 클래스를 양식에 추가하십시오.
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'
}
))
위의 변형은 모든 필드에 동일한 클래스 (예 : jQuery nice 둥근 모서리)를 제공합니다.
# 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'
양식의 필드에 클래스를 추가하려는 경우 템플릿에서 (View.py 또는 form.py에 있지 않음) 예를 들어 뷰를 재정의하지 않고 제 3 자 앱을 수정하려는 경우 다음에 설명 된 템플릿 필터 Charlesthk 대답 매우 편리합니다. 그러나이 답변에서 템플릿 필터는 필드가 가질 수있는 기존 클래스를 무시합니다.
나는 이것을 편집으로 추가하려고 노력했지만 새로운 답변으로 쓰여질 것으로 제안되었습니다.
따라서 다음은 필드의 기존 클래스를 존중하는 템플릿 태그입니다.
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})
당신은 이것을 시도 할 수 있습니다 ..
class SampleClass(forms.Form):
name = forms.CharField(max_length=30)
name.widget.attrs.update({'class': 'your-class'})
...
자세한 내용을 볼 수 있습니다. 장고 위젯
결과적으로 양식 생성자 로이 작업을 수행 할 수 있습니다 (이니 기능) 또는 양식 클래스가 시작되었습니다. 당신이 당신의 자신의 양식을 작성하지 않고 그 양식이 다른 곳에서 나오는 경우 때로는 필요합니다.
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})
당신은 또한 사용할 수 있습니다 Django Crispy Forms, 부트 스트랩 또는 기초와 같은 일부 CSS 프레임 워크를 사용하려는 경우 양식을 정의하는 훌륭한 도구입니다. 양식 필드에 대한 클래스를 쉽게 지정하기가 쉽습니다.
양식 클래스는 이것을 원합니다.
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'),
)
)
