Django模板中按分类优雅展示多项内容_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

Django模板中按分类优雅展示多项内容

2025-11-26

浏览次数：次

返回列表

django模板中按分类优雅展示多项内容

本教程详细介绍了如何在Django模板中，利用内置的`regroup`标签，将数据库中具有相同分类的多个项目进行分组展示。通过优化模板渲染逻辑，避免了重复的分类标题，实现了清晰、结构化的数据呈现，尤其适用于菜单、产品列表等场景，提升了用户界面的可读性和美观性。

1. 背景与问题描述

在Web开发中，我们经常需要展示按类别组织的数据，例如餐厅菜单按菜品类别（主食、饮品、小吃）分组，或电商网站产品按品牌、类型分组。一个常见的挑战是，如何在模板中高效且美观地显示这些数据，确保每个类别只出现一次标题，而其下的所有相关项目则整齐排列。

考虑以下Django模型结构，用于表示菜品及其所属类别：

models.py

from django.db import models

class gerechten_Categorie(models.Model):
    """
    定义菜品类别模型。
    """
    categorie = models.CharField(max_length=200)

    def __str__(self):
        return self.categorie

class gerecht_info(models.Model):
    """
    定义菜品信息模型，包含对类别的外键引用。
    """
    categorie = models.ForeignKey(gerechten_Categorie, on_delete=models.CASCADE)
    gerecht_name = models.CharField(max_length=200)
    gerecht_description = models.CharField(max_length=500, blank=True, null=True)
    gerecht_price = models.CharField(max_length=50)

    def __str__(self):
        return self.gerecht_name

在视图函数中，我们通常会获取所有菜品数据：

views.py

from django.shortcuts import render
from django.template import loader
from django.http import HttpResponse
from .models import gerecht_info, gerechten_Categorie

def gerechten(request):
    """
    获取所有菜品及其类别信息。
    """
    template = loader.get_template('café/gerechten.html')
    mydata = gerecht_info.objects.all() # 获取所有菜品
    mydata2 = gerechten_Categorie.objects.all() # 获取所有类别 (此处mydata2在本场景中非必需)

    context = {
        'mygerecht': mydata,
        'mycategories': mydata2
    }   
    return HttpResponse(template.render(context, request))

最初，一个常见的模板渲染方式是直接遍历所有菜品，并在每次迭代中显示其类别标题，这会导致相同类别的标题重复出现，影响页面布局和用户体验。

gerechten.html (原始示例)

{% if mygerecht %}
{% for cat in mygerecht %} {# 这里的cat实际上是gerecht_info对象 #}
<div class="flex">
    <div class="menu-head center">
        <h2>{{cat.categorie}}</h2> {# 每次迭代都会显示类别标题 #}
    </div>
    <div class="menu-item">
        <ul class="price">
            <li>{{cat.gerecht_name}}</li>
            <li>€{{cat.gerecht_price}}</li>
        </ul>
        {% if cat.gerecht_description %}
        <p>{{cat.gerecht_description}}</p>
        {% else %}
        <p></p>
        {% endif %}
    </div>
</div>
{% endfor %}
{% else %}
<div class="menu-head center">
<h2>no items *aible</h2>
</div>
{% endif %}

上述代码的问题在于，如果“Hapjes”类别下有三道菜，那么“Hapjes”这个标题会重复出现三次，这并非我们所期望的结构化显示方式。

2. 解决方案：使用Django regroup 模板标签

Django提供了一个强大的内置模板标签regroup，专门用于将列表中的连续相同项进行分组。这正是解决上述问题的理想工具。

2.1 regroup 标签介绍

regroup 标签的语法如下：

响应式优雅大气集团企业网站模板1.4.2

响应式优雅大气集团企业网站模板自带内核安装即用，响应式模板，图片文本均已可视化，简单后台易上手。支持多种内容模型，可按需添加。模板特点： 1、安装即用，自带人人站CMS内核及企业站展示功能（产品，新闻，案例展示等），并可根据需要增加表单搜索等功能（自带模板） 2、支持响应式 3、前端banner轮播图文本均已进行可视化配置 4、伪静态页面生成 5、支持内容模型、多语言、自定义表单、筛选、多条件搜

0 查看详情响应式优雅大气集团企业网站模板1.4.2

{% regroup list_to_group by attribute_to_group as new_grouped_list %}

list_to_group: 要进行分组的列表（例如，从视图传递过来的mygerecht）。
attribute_to_group: 列表中每个对象的属性，根据此属性进行分组（例如，gerecht_info对象的categorie属性）。
new_grouped_list: 分组后的新列表的变量名，可以在后续的循环中使用。

new_grouped_list 中的每个元素都是一个对象，包含两个关键属性：

grouper: 当前分组的键值（即attribute_to_group的值）。
list: 属于当前分组的所有原始对象的列表。

2.2 优化后的模板代码

利用 regroup 标签，我们可以重构 gerechten.html 模板，实现按类别分组显示菜品：

gerechten.html (优化后)

{% comment %}
    在进行分组前，建议对mygerecht列表按类别进行排序，以确保regroup能正确地将所有相同类别的项目连续分组。
    例如：在views.py中 mydata = gerecht_info.objects.all().order_by('categorie__categorie')
{% endcomment %}

{% if mygerecht %}
    {# 使用regroup标签按'categorie'属性对'mygerecht'列表进行分组 #}
    {% regroup mygerecht by categorie as grouped_categories %}

    {% for category_group in grouped_categories %}
    <div class="flex">
        <div class="menu-head center">
            {# 显示当前分组的类别名称 #}
            <h2>{{ category_group.grouper }}</h2> 
        </div>
        {# 遍历当前类别下的所有菜品 #}
        {% for item in category_group.list %}
        <div class="menu-item">
            <ul class="price">
                <li>{{ item.gerecht_name }}</li>
                <li>€{{ item.gerecht_price }}</li>
            </ul>
            {# 显示菜品描述，如果存在 #}
            <p>{% if item.gerecht_description %}{{ item.gerecht_description }}{% endif %}</p>
        </div>
        {% endfor %}
    </div>
    {% endfor %}
{% else %}
<div class="menu-head center">
    <h2>暂无可用菜品</h2>
</div>
{% endif %}

代码解释：

{% regroup mygerecht by categorie as grouped_categories %}: 这行代码是核心。它将mygerecht列表中的所有gerecht_info对象，根据它们的categorie属性（这是一个ForeignKey，regroup会自动访问其__str__方法或pk）进行分组，并将结果存储在grouped_categories变量中。
{% for category_group in grouped_categories %}: 外层循环遍历regroup生成的分组列表。category_group是每个分组的对象。
{{ category_group.grouper }}
: category_group.grouper会输出当前分组的类别名称（例如，“Hapjes”、“Drankjes”）。
{% for item in category_group.list %}: 内层循环遍历当前类别下的所有菜品。category_group.list是一个包含属于当前类别的gerecht_info对象的列表。
{{ item.gerecht_name }}、{{ item.gerecht_price }}等：在内层循环中，我们可以像往常一样访问每个菜品的详细信息。

通过这种方式，每个类别标题只会显示一次，其下紧跟着该类别的所有菜品，实现了清晰、结构化的展示效果。

3. 注意事项与最佳实践

数据排序: regroup 标签要求其处理的列表在分组键上是有序的。如果输入列表无序，regroup 会将不连续的相同键视为不同的分组。因此，强烈建议在视图函数中查询数据时，就按照分组依据的字段进行排序。
```
# views.py
def gerechten(request):
    # ...
    # 确保按类别名称排序，以便regroup正确工作
    mydata = gerecht_info.objects.all().order_by('categorie__categorie') 
    # ...
```
这里categorie__categorie表示通过外键categorie访问其关联的gerechten_Categorie对象的categorie字段。
外键属性访问: 当通过外键进行regroup时，如by categorie，Django会自动处理外键关系，通常会使用关联对象的__str__方法作为grouper的值。如果需要使用外键对象的其他属性，例如by categorie.id，则需明确指定。
性能考虑: regroup是在模板层操作已获取的数据。对于非常大的数据集，如果需要在视图层进行更复杂的聚合或分组，可以考虑在Python代码中使用itertools.groupby或数据库查询的GROUP BY子句（通过annotate等方法）来预处理数据，再传递给模板。然而，对于大多数常规展示需求，regroup已足够高效且方便。
空列表处理: 在使用regroup前，最好先检查列表是否为空，如示例中的{% if mygerecht %}，以避免在空列表上尝试分组导致不必要的渲染。