Django 在 django-crispy-forms 中展示多行多列

在本文中，我们将介绍如何使用 django-crispy-forms 在 Django 中展示多行多列的表单。

什么是 django-crispy-forms？

django-crispy-forms 是一个用于 Django 的第三方包，它提供了一种简洁的方式来创建美观的表单。它允许我们定义表单的布局和样式，使表单的展示更加灵活和易于管理。

创建 Django 项目和应用

首先，我们需要创建一个 Django 项目和一个应用。在终端中执行以下命令来创建一个名为 myproject 的 Django 项目：

$ django-admin startproject myproject

然后，在 myproject 文件夹中执行以下命令来创建一个名为 myapp 的 Django 应用：

$ python manage.py startapp myapp

配置 django-crispy-forms

接下来，我们需要配置 settings.py 文件以启用 django-crispy-forms。打开 settings.py 文件，在 INSTALLED_APPS 中加入 crispy_forms：

INSTALLED_APPS = [
    ...
    'crispy_forms',
    ...
]

然后，我们还需要配置一些常规设置。在 settings.py 文件的末尾添加以下代码：

# crispy-forms settings
CRISPY_TEMPLATE_PACK = 'bootstrap4'

这里我们设置了 CRISPY_TEMPLATE_PACK 为 'bootstrap4'，使用了 Bootstrap 4 的样式。

创建表单

现在我们可以开始创建我们的表单了。在 myapp 文件夹中的 forms.py 文件中，定义一个名为 MyForm 的表单类：

from django import forms
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Fieldset, Row, Column, Div, HTML

class MyForm(forms.Form):
    field1 = forms.CharField()
    field2 = forms.IntegerField()

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

        self.helper = FormHelper(self)
        self.helper.layout = Layout(
            Fieldset(
                'Fieldset 1',
                Row(
                    Column('field1', css_class='col-md-6'),
                    Column('field2', css_class='col-md-6'),
                )
            ),
            Fieldset(
                'Fieldset 2',
                Row(
                    Column(Div('field1', css_class='col'), css_class='col-md-6'),
                    Column(Div('field2', css_class='col'), css_class='col-md-6'),
                )
            ),
            HTML('<hr>'),
            Fieldset(
                'Fieldset 3',
                Row(
                    Column(Div('field1', css_class='col-md-4'), css_class='col-lg-3'),
                    Column(Div('field2', css_class='col-md-4'), css_class='col-lg-3'),
                    Column(Div('field1', css_class='col-md-4'), css_class='col-lg-3'),
                    Column(Div('field2', css_class='col-md-4'), css_class='col-lg-3'),
                )
            ),
        )

在这个例子中，我们定义了一个有两个字段的表单类 MyForm，字段类型分别是 CharField 和 IntegerField。在 __init__ 方法中，我们使用 FormHelper 来定义表单的布局，具体的布局内容可以根据需求进行自定义。

创建视图和模板

完成表单的定义后，我们需要创建一个视图和一个模板来展示表单。

在 myapp 文件夹中的 views.py 文件中，定义一个名为 form_view 的视图函数：

from django.shortcuts import render
from .forms import MyForm

def form_view(request):
    form = MyForm()
    return render(request, 'form.html', {'form': form})

这里我们使用 render 函数来渲染 form.html 模板，并将表单对象传递给模板。

接下来，在 myapp 文件夹中创建一个 templates 文件夹，并在其中创建一个名为 form.html 的模板文件。在 form.html 模板文件中，编写以下内容：

{% load crispy_forms_tags %}

<form method="post">
    {% csrf_token %}
    {% crispy form %}
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

在这个例子中，我们使用了 crispy_forms_tags 来渲染表单，在表单下方添加了一个提交按钮。

配置 URL

最后，我们需要将视图和 URL 进行关联。在 myproject 文件夹中的 urls.py 文件中，添加以下代码：

from django.urls import path
from myapp.views import form_view

urlpatterns = [
    path('form/', form_view, name='form'),
]

这里我们定义了一个名为 form 的路径，将它和 form_view 视图进行关联。

运行项目

现在，我们可以运行项目并访问表单页面了。

在终端中执行以下命令来启动 Django 开发服务器：

$ python manage.py runserver

然后在浏览器中访问 http://127.0.0.1:8000/form/，就能看到我们定义的表单页面了。

总结

本文介绍了如何使用 django-crispy-forms 在 Django 中展示多行多列的表单。我们学习了如何配置 django-crispy-forms，创建表单类，创建视图和模板，以及配置 URL。通过使用 django-crispy-forms，我们能够方便地定义表单的布局和样式，使表单的展示更加美观和易于管理。希望本文对您在 Django 开发中展示多行多列的表单有所帮助！