如何向使用 Django CreateView 创建的表单添加自定义样式

Question

我对 Django 很陌生。按照一些教程，我设法使用 Python 通用视图（CreateView）创建了一个表单

我有一个“问题”模型

class Question(models.Model):
    title = models.CharField(max_length=200)
    body = models.TextField(max_length=2000)
    category = models.CharField(max_length=50)
    votes = models.IntegerField(default=0)
    asked_date = models.DateTimeField(default=datetime.now)

并使用这个模型我创建了一个视图类

class QuestionCreate(CreateView):
    model = Question
    fields = ['title', 'body', 'category']

这确实生成了一个不错的 HTML 表单。但是如何将 CSS 属性传递给每个字段？

Answer 1

您可以为 Question 编写一个模型表单并将其传递给创建视图，

class QuestionForm(forms.ModelForm):

    class Meta:
        model = Question
        fields = ('myfield1', 'myfield2) 
        widgets = {
        'myfield1': forms.TextInput(attrs={'class': 'myfieldclass'}),
        }

或者您可以覆盖 init 方法来为每个字段指定某个类，

def __init__(self, *args, **kwargs):
    super(MyForm, self).__init__(*args, **kwargs)
    self.fields['myfield1'].widget.attrs.update({'class' : 'myfieldclass'})

然后，它传递给属性form_class的CreateView，

class QuestionCreate(CreateView):
    model = Question
    form_class = QuestionForm

Answer 2

我在基于Bootstrap框架的 Django 应用程序中遇到了类似的问题。我的第一次尝试：

# views.py
from django.views.generic.edit import UpdateView
from . import models

class ModuleUpdateView(UpdateView):
    model = models.Module
    fields = ['name', 'description', 'status']

看起来如下：

确实不太好！第二次尝试意味着为我的视图定义一个自定义ModelForm并应用其中的所有自定义：

# forms.py
from .models import Module

class ModuleForm(forms.ModelForm):
    def __init__(self, *args, **kwargs):
        super(ModuleForm, self).__init__(*args, **kwargs)
        for visible in self.visible_fields():
            visible.field.widget.attrs['class'] = 'form-control'

    class Meta:
        model = Module
        fields = ['name', 'description', 'status']

请注意 中的for循环__init__，它将表单控制CSS 类添加到所有可见的表单字段。表单控制的 CSS 样式由 Bootstrap 提供，因此我什至不必修改样式表。

一旦我有了自定义ModelForm，我就可以重写我的 View 类，如下所示：

# views.py
from django.views.generic.edit import UpdateView
from . import forms, models

class ModuleUpdateView(UpdateView):
    model = models.Module
    form_class = forms.ModuleForm

您可以看到下面的结果。

好得多！

希望对您有帮助，如有问题请随时评论。