从数据库中接收动态数据时，如何在 django 模板中以网格格式显示内容？答案

【问题标题】：How to display content in grid format in django template when receiving dynamic data in terms of list from database?从数据库中接收动态数据时，如何在 django 模板中以网格格式显示内容？
【发布时间】：2020-08-27 18:23:43
【问题描述】：

在 django 模型中，我为假设愿望列表创建了一个多选字段，用户可以在其中从可用选项中选择多个愿望。

当在模板上显示这些数据时，我以逗号分隔的格式存储这些数据，这很容易。

但是，我希望这些数据动态显示为一行两列，一旦两列被填满，还有更多数据要显示，逻辑应该能够创建新行并显示django-template 上的剩余内容。

供参考：

# models.py
class Wishlist(models.Model):
    wishlist = (
        ('W1',"Buy a big masion"),
         ('W2',"Buy worlds fastest car"),
          ('W3',"Visit Europe"),
           ('W4',"Travel on bike to mountains")
    )
    
    your_wishlist = MultiSelectField(choices=wishlist)

# views.py
def index(request):
    wishlist = Wishlist.objects.all()
    context = {
        "wishlist":wishlist
    }
    return render(request,'demolistingapp/index.html',context)

# index.html
{% load app_filters %}
{% block content %}
<h1>INDEX LISTING APP</h1>
{% if wishlist %}
    {% for each_wish in wishlist %}
       {% with  each_wish.your_wishlist|split:"," as wish %}
            {% for mywish in wish %}
                <p>{{mywish}}</p><br>
            {% endfor %}
       {% endwith %}
    {% endfor %}
{% endif %}
{% endblock %}

我已经注册了返回列表的自定义过滤器拆分。我希望通过维护两列以网格形式显示数据。

示例输出： enter image description here

【问题讨论】：

标签： django django-models django-views django-templates

【解决方案1】：

您可以在模板中使用cycle 来创建不同的类：

<p class="{% cycle row_left row_right %}">{{ mywish }}</p>

具有足够的 CSS（浮动/清除或内联块；宽度：50%）。

【讨论】：

【解决方案2】：

我会将您的外部 for 循环包装在带有类的 HTML 元素中，然后将网格布局应用于样式表中的该类。将每个愿望包装在一个带有特定类的 div 元素中也有助于您进一步设计样式。

<div class="wishlist">
    {% for each_wish in wishlist %}
       {% with  each_wish.your_wishlist|split:"," as wish %}
            {% for mywish in wish %}
                <div class="wish">
                    <p>{{mywish}}</p>
                </div>
             {% endfor %}
       {% endwith %}
    {% endfor %}
</div>

在你的 CSS 中：

.wishlist {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
}

【讨论】：