تحديد فئة CSS في نماذج جانغو

Question

افترض أن لدي نموذجًا

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

هل هناك طريقة بالنسبة لي لتحديد فئات CSS في كل حقل بحيث يمكنني بعد ذلك استخدام jQuery بناءً على الفئة في صفحتي المعروضة؟

كنت أتمنى ألا أضطر إلى إنشاء النموذج يدويًا.

Answer 1

وأجاب على سؤالي الخاص. تحسر

HTTP: //docs.djangoproject كوم / EN / ديف / المرجع / أشكال / الحاجيات / # django.forms.Widget.attrs

لم أكن أدرك أنه صدر في منشئ القطعة.

Answer 2

ولكن حل آخر لا تتطلب تغييرات في التعليمات البرمجية الثعبان وذلك هو أفضل للمصممين وتغييرات لمرة واحدة التقديمية: <لأ href = "https://github.com/kmike/django-widget-tweaks" يختلط = "noreferrer">، القرص جانغو-القطعة . نأمل أن شخص ما تجد أنه من المفيد.

Answer 3

وهنا حل آخر لإضافة تعريفات فئة لالحاجيات بعد اعلان الحقول في الصف.

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

Answer 4

يستخدم جانغو القطعة بتعديل, إنه سهل الاستخدام ويعمل بشكل جيد.

وإلا فيمكن القيام بذلك باستخدام مرشح قالب مخصص.

مع الأخذ في الاعتبار تقديم النموذج الخاص بك بهذه الطريقة:

<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 طريقة.

يمكنك إنشاء مرشح مخصص "addcss" في "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})

ثم قم بتطبيق الفلتر الخاص بك:

{% 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 باستخدام فئة CSS "MyClass".

نأمل أن تكون هذه المساعدة.

تحرير 1

• قم بتحديث الفلتر وفقًا لـ dimyGإجابة

• أضف رابط Django-widget-tweak

تحرير 2

• قم بتحديث الفلتر وفقًا لـ بهيدتعليق

Answer 5

والتوسع على طريقة أشار إلى في 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'

وهذا يبدو قليلا أكثر نظافة بالنسبة لي.

Answer 6

إذا كنت تريد كافة الحقول في النموذج إلى وراثة فئة معينة، عليك فقط تحديد الفئة الأصل، أن يرث من 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' إلى كافة الحقول على جميع أشكال طلبي تلقائيا، دون أن يضيف تكرار التعليمات البرمجية.

Answer 7

وهنا هو طريقة بسيطة لتغيير في الرأي. إضافة أدناه في عرض فقط قبل أن يمررها إلى القالب.

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

Answer 8

وببساطة إضافة الطبقات إلى النموذج الخاص بك على النحو التالي.

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

Answer 9

وهنا هو الاختلاف على ما سبق والتي سوف تعطي كل المجالات نفس الفئة (تدوير زوايا مثل لطيفة مسج).

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

Answer 10

في حالة رغبتك في إضافة فصل دراسي إلى حقل النموذج في قالب (ليس في view.py أو form.py) على سبيل المثال، في الحالات التي تريد فيها تعديل تطبيقات الجهات الخارجية دون تجاوز طرق العرض الخاصة بها، ثم عامل تصفية القالب كما هو موضح في شارلستك إجابة مريحة للغاية.ولكن في هذه الإجابة، يتجاوز مرشح القالب أي فئات موجودة قد يحتوي عليها الحقل.

حاولت إضافة هذا كتعديل ولكن تم اقتراح كتابته كإجابة جديدة.

لذا، إليك علامة قالب تحترم الفئات الموجودة في الحقل:

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

Answer 11

ويمكنك أن تجرب هذا ..

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

ويمكنك ان ترى المزيد من المعلومات في: بفك القطع

Answer 12

كما اتضح أنه يمكنك القيام بذلك في منشئ النماذج (فيه وظيفة) أو بعد بدء فئة النموذج.يكون هذا مطلوبًا أحيانًا إذا كنت لا تكتب النموذج الخاص بك وكان هذا النموذج يأتي من مكان آخر -

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

Answer 13

ويمكنك أيضا استخدام جانغو كرسبي أشكال ، انها كبيرة أداة لتحديد النماذج في حال كنت ترغب في استخدام بعض إطار 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'),
        )
    )