当从数据库接收列表形式的动态数据时，如何在django模板中以网格格式显示内容

Question

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

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

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

供参考：

# 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 %}

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

样本输出：在此处输入图像描述

Answer 1

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

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

有足够的css(float/clear或inline块；宽度：50%(。

Answer 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;
}