Django - 显示属于每张卡片的类别列表
Django - Display list of category belonging to each card
我有一个 Giftcard 模型和一个类别模型,其中包含每张卡的所有类别、费率和期限。它有一个返回 Giftcard 的外键。
我只想列出每张礼品卡的类别、费率和条款。由于代码是正确的,它显示所有礼品卡的相同类别、费率和条款。
型号
class Giftcard(models.Model):
name = models.CharField(max_length=100, unique=True)
card_image = models.ImageField(upload_to='Giftcard', blank=False)
date = models.DateTimeField(auto_now_add=True)
publish = models.BooleanField(default=False)
class Category(models.Model):
category = models.CharField(max_length=250)
name = models.ForeignKey(Giftcard, on_delete=models.CASCADE, related_name="specs")
rate = models.IntegerField()
terms = models.TextField()
这是我的看法
def giftcard(request):
giftcards = Giftcard.objects.filter(publish=True)
context = {
'giftcards': giftcards,
}
return render(request, 'dashboard/giftcard.html', context)
这是我的模板
{% for giftcard in giftcards %}
<!-- Card -->
<div class="col-lg-4 gift__card col-6 p-0">
<a type="button" class="btn">
<img class="img-fluid gift__card-img" src="{{ giftcard.card_image.url }}">
</a>
<div class="container d-flex align-items-center justify-content-center">
<div class="gift__card-modal-container py-5">
<div class="card__container">
<div class="gift__card-overlay"></div>
<div class="container-fluid bg-light gift__card-modal shadow-lg">
<div class="pop p-5">
<div class="row d-flex align-items-center justify-content-between">
<div class="col-lg-5 col-12 p-0 m-0">
<img class="img-fluid" src="{{ giftcard.card_image.url }}">
<p class="text-muted">Select the card category and the amount.</p>
</div>
<div class="col-lg-6 col-sm-12 card-details">
<form class="card-form">
<div class="form-group py-2">
<label for="card-category">Card category</label>
<input list="category" class="form-control" name="category" id="card_category"
placeholder="Select card category">
{% for spec in giftcard.specs.all %}
<datalist id="category">
<option value="{{ spec.category }}">{{ spec.category }}</option>
</datalist>
{% endfor %}
</div>
<div class="form-group py-2">
<label for="Amount">Amount</label>
<div class="d-flex align-items-center amount">
<input type="text" class="form-control" id="amount"
placeholder="Please enter amount">
<span class="">#100,000</span>
</div>
</div>
<div class="form-group py-3">
{% for spec in giftcard.specs.all %}
<label for="rate">Current rate - {{ spec.rate }}</label>
{% endfor %}
</div>
<div class="border-none pt-2 pl-3 d-flex justify-content-end">
<button type="button" class="btn process-card-btn">Proceed</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="gift__terms-card hide fade" id="terms" tabindex="-1" role="dialog"
aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content terms">
<div class="p-5">
<h4 class="terms-title pb-4">Trading terms</h4>
{% for spec in giftcard.specs.all %}
<p class="pb-2">
{{ spec.terms }}
</p>
{% endfor %}
<div class="border-none pt-3 pl-3 d-flex justify-content-end">
<button type="button" class="btn process-card-btn">Proceed</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
从 django-doc 开始,您必须在主 Giftcard
table 中创建 ForeginKey
字段,这将与 Category
建立 ManyToOne
关系table.
试试这个:
models.py
from django.db import models
class Category(models.Model):
category = models.CharField(max_length=250)
rate = models.IntegerField()
terms = models.TextField()
def __str__(self):
return self.category
class Giftcard(models.Model):
name = models.CharField(max_length=100, unique=True)
card_image = models.ImageField(upload_to='Giftcard/', blank=False)
date = models.DateTimeField(auto_now_add=True)
publish = models.BooleanField(default=False)
gift_category = models.ForeignKey(Category, on_delete=models.CASCADE)
views.py
def giftcard(request):
giftcards = Giftcard.objects.filter(publish=True)
context = {
'giftcards': giftcards
}
return render(request, 'dashboard/giftcard.html', context)
现在,您可以在 template
文件的 Giftcard
项中访问 Category
table 的所有属性,并且 giftcard
可以拥有更多比一个类别,它被称为ManyToOne
关系,
Note:
you can also use choices
, which is much better than making table
, you can see that too here in django-doc.
编辑
在 datalist
中执行此操作
<datalist id="category">
{% for spec in giftcard.specs.all %}
<option value="{{ spec.category }}">{{ spec.category }}</option>
{% endfor %}
</datalist>
如果,正如您在其中一条评论中所说,“它不会那样工作,因为一张礼品卡可以有多个类别” 和 “不,Category 不能有超过一张 Giftcard”,那么你的 original 模型是正确的,ForeignKey 在 Category class 中。其次,我不知道到底发生了什么,也许添加你得到的错误的屏幕截图,因为我刚刚尝试了你的 original 代码,它 有效,@Sunderam 建议对 datalist
进行修改。在您的 html 模板中对此进行测试:
{% for giftcard in giftcards %}
{% for spec in giftcard.specs.all %}
{{ spec.terms }}<br>
{{ spec.category }}<br>
{{ spec.rate }}<br>
{% endfor %}
{% endfor %}
执行此操作时,我看到了不同的条款、类别和费率。再说一次,这不是你想要的吗?
编辑
您必须了解数据列表将具有 所有 和 spec
值,并且当您开始在输入框中键入时会显示一个。例如,如果您键入 c
,则列表将弹出 所有 个以 c
.
开头的类别
编辑
确保数据列表已更改为
<div class="form-group py-2">
<label for="card-category">Card category</label>
<input list="category" class="form-control" name="category" id="card_category"
placeholder="Select card category">
{% for spec in giftcard.specs.all %}
<datalist id="category">
<option value="{{ spec.category }}">{{ spec.category }}</option>
</datalist>
{% endfor %}
</div>
毕竟你只想要一个 <datalist>
个元素,然后很多 <option>
个。
我有一个 Giftcard 模型和一个类别模型,其中包含每张卡的所有类别、费率和期限。它有一个返回 Giftcard 的外键。
我只想列出每张礼品卡的类别、费率和条款。由于代码是正确的,它显示所有礼品卡的相同类别、费率和条款。
型号
class Giftcard(models.Model):
name = models.CharField(max_length=100, unique=True)
card_image = models.ImageField(upload_to='Giftcard', blank=False)
date = models.DateTimeField(auto_now_add=True)
publish = models.BooleanField(default=False)
class Category(models.Model):
category = models.CharField(max_length=250)
name = models.ForeignKey(Giftcard, on_delete=models.CASCADE, related_name="specs")
rate = models.IntegerField()
terms = models.TextField()
这是我的看法
def giftcard(request):
giftcards = Giftcard.objects.filter(publish=True)
context = {
'giftcards': giftcards,
}
return render(request, 'dashboard/giftcard.html', context)
这是我的模板
{% for giftcard in giftcards %}
<!-- Card -->
<div class="col-lg-4 gift__card col-6 p-0">
<a type="button" class="btn">
<img class="img-fluid gift__card-img" src="{{ giftcard.card_image.url }}">
</a>
<div class="container d-flex align-items-center justify-content-center">
<div class="gift__card-modal-container py-5">
<div class="card__container">
<div class="gift__card-overlay"></div>
<div class="container-fluid bg-light gift__card-modal shadow-lg">
<div class="pop p-5">
<div class="row d-flex align-items-center justify-content-between">
<div class="col-lg-5 col-12 p-0 m-0">
<img class="img-fluid" src="{{ giftcard.card_image.url }}">
<p class="text-muted">Select the card category and the amount.</p>
</div>
<div class="col-lg-6 col-sm-12 card-details">
<form class="card-form">
<div class="form-group py-2">
<label for="card-category">Card category</label>
<input list="category" class="form-control" name="category" id="card_category"
placeholder="Select card category">
{% for spec in giftcard.specs.all %}
<datalist id="category">
<option value="{{ spec.category }}">{{ spec.category }}</option>
</datalist>
{% endfor %}
</div>
<div class="form-group py-2">
<label for="Amount">Amount</label>
<div class="d-flex align-items-center amount">
<input type="text" class="form-control" id="amount"
placeholder="Please enter amount">
<span class="">#100,000</span>
</div>
</div>
<div class="form-group py-3">
{% for spec in giftcard.specs.all %}
<label for="rate">Current rate - {{ spec.rate }}</label>
{% endfor %}
</div>
<div class="border-none pt-2 pl-3 d-flex justify-content-end">
<button type="button" class="btn process-card-btn">Proceed</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="gift__terms-card hide fade" id="terms" tabindex="-1" role="dialog"
aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content terms">
<div class="p-5">
<h4 class="terms-title pb-4">Trading terms</h4>
{% for spec in giftcard.specs.all %}
<p class="pb-2">
{{ spec.terms }}
</p>
{% endfor %}
<div class="border-none pt-3 pl-3 d-flex justify-content-end">
<button type="button" class="btn process-card-btn">Proceed</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
从 django-doc 开始,您必须在主 Giftcard
table 中创建 ForeginKey
字段,这将与 Category
建立 ManyToOne
关系table.
试试这个:
models.py
from django.db import models
class Category(models.Model):
category = models.CharField(max_length=250)
rate = models.IntegerField()
terms = models.TextField()
def __str__(self):
return self.category
class Giftcard(models.Model):
name = models.CharField(max_length=100, unique=True)
card_image = models.ImageField(upload_to='Giftcard/', blank=False)
date = models.DateTimeField(auto_now_add=True)
publish = models.BooleanField(default=False)
gift_category = models.ForeignKey(Category, on_delete=models.CASCADE)
views.py
def giftcard(request):
giftcards = Giftcard.objects.filter(publish=True)
context = {
'giftcards': giftcards
}
return render(request, 'dashboard/giftcard.html', context)
现在,您可以在 template
文件的 Giftcard
项中访问 Category
table 的所有属性,并且 giftcard
可以拥有更多比一个类别,它被称为ManyToOne
关系,
Note:
you can also usechoices
, which is much better than makingtable
, you can see that too here in django-doc.
编辑
在 datalist
<datalist id="category">
{% for spec in giftcard.specs.all %}
<option value="{{ spec.category }}">{{ spec.category }}</option>
{% endfor %}
</datalist>
如果,正如您在其中一条评论中所说,“它不会那样工作,因为一张礼品卡可以有多个类别” 和 “不,Category 不能有超过一张 Giftcard”,那么你的 original 模型是正确的,ForeignKey 在 Category class 中。其次,我不知道到底发生了什么,也许添加你得到的错误的屏幕截图,因为我刚刚尝试了你的 original 代码,它 有效,@Sunderam 建议对 datalist
进行修改。在您的 html 模板中对此进行测试:
{% for giftcard in giftcards %}
{% for spec in giftcard.specs.all %}
{{ spec.terms }}<br>
{{ spec.category }}<br>
{{ spec.rate }}<br>
{% endfor %}
{% endfor %}
执行此操作时,我看到了不同的条款、类别和费率。再说一次,这不是你想要的吗?
编辑
您必须了解数据列表将具有 所有 和 spec
值,并且当您开始在输入框中键入时会显示一个。例如,如果您键入 c
,则列表将弹出 所有 个以 c
.
编辑
确保数据列表已更改为
<div class="form-group py-2">
<label for="card-category">Card category</label>
<input list="category" class="form-control" name="category" id="card_category"
placeholder="Select card category">
{% for spec in giftcard.specs.all %}
<datalist id="category">
<option value="{{ spec.category }}">{{ spec.category }}</option>
</datalist>
{% endfor %}
</div>
毕竟你只想要一个 <datalist>
个元素,然后很多 <option>
个。