Xác định lớp css trong biểu mẫu django

Giả sử tôi có một hình thức

class SampleClass(forms.Form):
    name = forms.CharField(max_length=30)
    age = forms.IntegerField()
    django_hacker = forms.BooleanField(required=False)

Có cách nào để tôi xác định các lớp css trên mỗi trường để sau đó tôi có thể sử dụng jQuery dựa trên lớp trong trang được hiển thị của mình không?

Tôi đã hy vọng không phải tự xây dựng biểu mẫu.

Tuy nhiên, một giải pháp khác không yêu cầu thay đổi mã python và vì vậy tốt hơn cho các nhà thiết kế và thay đổi trình bày một lần: django-widget-chỉnh . Hy vọng ai đó sẽ tìm thấy nó hữu ích.

Trả lời câu hỏi của riêng tôi. Thở dài

http://docs.djangoproject.com/en/dev/ref/forms/widgets/#django.forms.Widget.attrs

Tôi không nhận ra nó đã được chuyển vào hàm tạo widget.

Đây là một giải pháp khác để thêm các định nghĩa lớp vào các widget sau khi khai báo các trường trong lớp.

def __init__(self, *args, **kwargs):
    super(SampleClass, self).__init__(*args, **kwargs)
    self.fields['name'].widget.attrs['class'] = 'my_class'

Sử dụng django-widget-chỉnh , nó rất dễ sử dụng và hoạt động khá tốt.

Nếu không, điều này có thể được thực hiện bằng cách sử dụng bộ lọc mẫu tùy chỉnh.

Xem xét bạn kết xuất biểu mẫu của bạn theo cách này:

<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 là một thể hiện của BoundField trong đó có các as_widget phương pháp.

bạn có thể tạo bộ lọc tùy chỉnh "addcss" trong "my_app / templatetags / myfilters.py"

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})

Và sau đó áp dụng bộ lọc của bạn:

{% 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 sau đó sẽ được kết xuất với lớp css "MyClass".

Hy vọng điều này giúp đỡ.

CHỈNH SỬA 1

• Cập nhật bộ lọc theo câu trả lời của dimyG

• Thêm liên kết django-widget-chỉnh

CHỈNH SỬA 2

• Cập nhật bộ lọc theo nhận xét của Bhyd

Mở rộng về phương thức được trỏ đến tại docs.djangoproject.com:

class MyForm(forms.Form): 
    comment = forms.CharField(
            widget=forms.TextInput(attrs={'size':'40'}))

Tôi nghĩ thật rắc rối khi phải biết loại widget gốc cho mọi trường và nghĩ thật buồn cười khi ghi đè mặc định chỉ để đặt tên lớp trên trường biểu mẫu. Điều này dường như làm việc cho tôi:

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'

Điều này có vẻ sạch sẽ hơn với tôi.

Nếu bạn muốn tất cả các trường trong biểu mẫu kế thừa một lớp nhất định, bạn chỉ cần xác định một lớp cha, kế thừa từ đó forms.ModelForm, và sau đó kế thừa từ nó

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

Điều này giúp tôi tự động thêm 'form-control'lớp vào tất cả các trường trên tất cả các biểu mẫu của ứng dụng của mình mà không cần thêm bản sao mã.

Đây là cách đơn giản để thay đổi trong xem. thêm bên dưới trong chế độ xem ngay trước khi chuyển nó vào mẫu.

form = MyForm(instance = instance.obj)
form.fields['email'].widget.attrs = {'class':'here_class_name'}

Đơn giản chỉ cần thêm các lớp vào mẫu của bạn như sau.

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'
        }
    ))

Đây là một biến thể ở trên sẽ cung cấp cho tất cả các trường cùng một lớp (ví dụ: các góc tròn đẹp của jquery).

  # 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'

Bạn có thể thử điều này ..

class SampleClass(forms.Form):
  name = forms.CharField(max_length=30)
  name.widget.attrs.update({'class': 'your-class'})
...

Bạn có thể xem thêm thông tin trong: Django Widgets

Trong trường hợp bạn muốn thêm một lớp vào trường của biểu mẫu trong một mẫu (không phải trong view.py hoặc form.py), ví dụ trong trường hợp bạn muốn sửa đổi ứng dụng của bên thứ 3 mà không ghi đè chế độ xem của chúng, thì bộ lọc mẫu như được mô tả trong câu trả lời của Charlerak rất thuận tiện. Nhưng trong câu trả lời này, bộ lọc mẫu sẽ ghi đè bất kỳ lớp hiện có nào mà trường có thể có.

Tôi đã cố gắng thêm nó dưới dạng chỉnh sửa nhưng nó được đề nghị viết thành một câu trả lời mới.

Vì vậy, đây là một thẻ mẫu tôn trọng các lớp hiện có của trường:

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})

Hóa ra bạn có thể làm điều này trong hàm tạo biểu mẫu ( hàm init ) hoặc sau khi lớp biểu mẫu được bắt đầu. Điều này đôi khi được yêu cầu nếu bạn không viết biểu mẫu của riêng bạn và biểu mẫu đó đến từ nơi khác -

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})

Bạn cũng có thể sử dụng Django Crispy Forms , đây là một công cụ tuyệt vời để xác định các biểu mẫu trong trường hợp bạn muốn sử dụng một số khung CSS như Bootstrap hoặc Foundation. Và thật dễ dàng để chỉ định các lớp cho các trường mẫu của bạn ở đó.

Lớp mẫu của bạn sẽ thích điều này sau đó:

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'),
        )
    )