قم بتغيير عرض عناصر النموذج التي تم إنشاؤها باستخدام ModelForm في Django

Question

كيف يمكنني تغيير عرض عنصر نموذج منطقة النص إذا استخدمت ModelForm لإنشائه؟

هنا فئة المنتج الخاص بي:

class ProductForm(ModelForm):
    long_desc = forms.CharField(widget=forms.Textarea)
    short_desc = forms.CharField(widget=forms.Textarea)
    class Meta:
        model = Product

وكود القالب...

{% for f in form %}
    {{ f.name }}:{{ f }}
{% endfor %}

f هو عنصر النموذج الفعلي ...

Answer 1

أسهل طريقة لحالة الاستخدام الخاصة بك هي استخدام CSS.إنها لغة مخصصة لتحديد العرض التقديمي.انظر إلى الكود الذي تم إنشاؤه بواسطة النموذج، ولاحظ معرفات الحقول التي تهمك، وقم بتغيير مظهر هذه الحقول من خلال CSS.

مثال ل long_desc الحقل في ProductForm الخاص بك (عندما لا يحتوي النموذج الخاص بك على بادئة مخصصة):

#id_long_desc {
    width: 300px;
    height: 200px;
}

النهج الثاني هو تمرير attrs الكلمة الأساسية لمنشئ القطعة الخاصة بك.

class ProductForm(ModelForm):
    long_desc = forms.CharField(widget=forms.Textarea(attrs={'cols': 10, 'rows': 20}))
    short_desc = forms.CharField(widget=forms.Textarea)
    class Meta:
        model = Product

إنه الموصوفة في وثائق جانغو.

النهج الثالث هو ترك الواجهة التعريفية الرائعة للنماذج الجديدة لفترة من الوقت وتعيين سمات عنصر واجهة المستخدم الخاصة بك في مُنشئ مخصص.

class ProductForm(ModelForm):
    long_desc = forms.CharField(widget=forms.Textarea)
    short_desc = forms.CharField(widget=forms.Textarea)
    class Meta:
        model = Product

    # Edit by bryan
    def __init__(self, *args, **kwargs):
        super(ProductForm, self).__init__(*args, **kwargs) # Call to ModelForm constructor
        self.fields['long_desc'].widget.attrs['cols'] = 10
        self.fields['long_desc'].widget.attrs['rows'] = 20

هذا النهج له المزايا التالية:

• يمكنك تحديد سمات عنصر واجهة المستخدم للحقول التي يتم إنشاؤها تلقائيًا من النموذج الخاص بك دون إعادة تعريف الحقول بأكملها.
• لا يعتمد ذلك على بادئة النموذج الخاص بك.

Answer 2

إجابة ممتازة من zuber، ولكن أعتقد أن هناك خطأ في رمز المثال للنهج الثالث.يجب أن يكون المنشئ:

def __init__(self, *args, **kwargs):
    super(ProductForm, self).__init__(*args, **kwargs) # Call to ModelForm constructor
    self.fields['long_desc'].widget.attrs['cols'] = 10
    self.fields['long_desc'].widget.attrs['cols'] = 20

لا تحتوي كائنات الحقل على سمات "attrs"، ولكن عناصر واجهة المستخدم الخاصة بها تحتوي على سمات.

Answer 3

في حالة استخدام وظيفة إضافية مثل Grappelli التي تستخدم الأنماط بشكل مكثف، فقد تجد أنه يتم تجاهل أي سمات للصفوف والأعمدة التي تم تجاوزها بسبب محددات CSS التي تعمل على عنصر واجهة المستخدم الخاص بك.يمكن أن يحدث هذا عند استخدام النهج الثاني أو الثالث الممتاز لـ zuber أعلاه.

في هذه الحالة، ما عليك سوى استخدام النهج الأول ممزوجًا إما بالطريقة الثانية أو الثالثة عن طريق تعيين سمة "style" بدلاً من سمات "rows" و"cols".

إليك مثال على التعديل فيه في النهج الثالث أعلاه:

def __init__(self, *args, **kwargs):
    super(ProductForm, self).__init__(*args, **kwargs) # Call to ModelForm constructor
    self.fields['short_desc'].widget.attrs['style'] = 'width:400px; height:40px;'
    self.fields['long_desc'].widget.attrs['style']  = 'width:800px; height:80px;'

Answer 4

قم بتعيين الصف وفئة CSS الخاصة بك في عرض نموذج المسؤول الخاص بك:

'explicacion': AutosizedTextarea(attrs={'rows': 5, 'class': 'input-xxlarge', 'style': 'width: 99% !important; resize: vertical !important;'}),