我有一个咖啡馆的应用程序，它只有一个主页。我想根据菜单类别过滤菜肴。如何过滤菜单类别并在同一页面内返回它？我不知道该怎么做我只为所有操作提供一页。我已经尝试过这样。但是我很困惑我应该在类别中提供什么url。此代码有任何解决方案吗？我必须使用jquery ajax之类的东西吗？这个??
models.py
class MenuCategory(models.Model):
title = models.CharField(max_length=250)
slug = AutoSlugField(populate_from='title')
active = models.BooleanField(default=True)
featured = models.BooleanField(default=False)
def __str__(self):
return self.title
class Meta:
verbose_name_plural = 'Menu Category'
class Food(models.Model):
name = models.CharField(max_length=250)
price = models.CharField(max_length=100)
detail = models.TextField(blank=True)
category = models.ForeignKey(MenuCategory,on_delete=models.DO_NOTHING)
image = models.ImageField(upload_to='Foods',blank=True)
featured = models.BooleanField(default=False)
active = models.BooleanField(default=True)
date = models.DateTimeField(auto_now_add=True)
def __str__(self):
return self.name
class Meta:
verbose_name_plural = 'Foods'
views.py
def homepage(request):
headers = HeaderSection.objects.filter(active=True)
about_sections = AboutSection.objects.filter(active=True)
about_section_images = AboutSectionImage.objects.filter(featured=True)
menu_sections = MenuSection.objects.all()
menu_categories = MenuCategory.objects.filter(active=True)
featured_dishes = Food.objects.filter(featured=True)
special_dishes_section = SpecialDishSection.objects.all()
foods = Food.objects.filter(active=True)
category_foods = Food.objects.filter(category=menu_categories)
return render(request,'cafe/base.html',{'headers':headers,
'about_sections':about_sections,
'about_section_images':about_section_images,
'menu_sections':menu_sections,
'menu_categories':menu_categories,
'featured_dishes':featured_dishes,
'special_dishes_section':special_dishes_section,
'foods':foods,
'category_foods':category_foods})
base.html
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link" href="#">Special</a>
</li> -->
<li class="nav-item">
<a class="nav-link" href="#menu">Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#gallery">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#testimonials">Testimonials</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
<div class="iso-menu">
<ul> <li class="active" data-filter="*">All</li>
{% for category in menu_categories %}
<li data-filter=".">{{category.title}}</li># what url should i have to give here
{% endfor %}
</ul>
</div>
# this items are under the All categories
<div class="iso-item" data-aos="zoom-in-up" data-aos-duration="1000">
{% for food in foods %}
{% if food.featured %}
<div class="item dessert dinner"> <!-- Iso-Item .// --> <!-- Alternate .// -->
<div class="menu-card-main">
<div class="menu-card-image recommend">
<a href="/media/{{food.image}}" data-lightbox="menu4" data-title="Smoked Paprika Hum"><img src="/media/{{food.image}}" alt="Dish4"></a>
</div>
<div class="manu-card-content main-box">
<p class="dish-price text-center u-margin-bottom-mini">{{food.price}}</p>
<h4 class="dish-name text-center u-margin-bottom-small">{{food.name}}</h4>
<p class="dish-detail text-center">{{food.detail}}</p>
</div>
</div>
</div>
{% else %}
<div class="item dinner lunch"> <!-- Iso-Item .// -->
<div class="menu-card-main">
<div class="manu-card-content main-box">
<p class="dish-price text-center u-margin-bottom-mini">NPR{{food.price}}</p>
<h4 class="dish-name text-center u-margin-bottom-small">{{food.name}}</h4>
<p class="dish-detail text-center">{{food.detail}}</p>
</div>
<div class="menu-card-image">
<a href="/media/{{food.image}}" data-lightbox="menu1" data-title="Grilled American Fillet"><img src="/media/{{food.image}}" alt="Dish1"></a>
</div>
</div>
</div>
{% endif %}
{% endfor %} <!-- Iso-Item .// -->
</div>
urls.py
urlpatterns = [
path('',views.homepage,name='home'),
# path('category/<slug>/',views.categories,name='categories')
]
答案 0 :(得分：0)
请注意，您需要有一个跳到其他类别的页面。您可以在同一页面上找到所有类别的链接。
现在这是重新加载每个类别页面的版本。我只关注您的食物和类别模型。
def homepage(request, category):
active_category = MenuCategory.objects.get(id=category)
foods = Food.objects.filter(active=True, category=active_category )
return render(request,'cafe/base.html',{'category': active_category ,
'foods ':foods })
然后在您的网址中执行
urlpatterns = [
path(r'^Food/(?P<category>\d+)/$', 'views.homepage','home')
]
和html中的
<ul>
{% for food in foods %}
<li >{{food}}</li>
{% endfor %}
</ul>
因此，现在您可以使用“食品/”加上类别ID来调用所有类别。
更好的方法是使用JS。首先，您需要以正确的方式准备数据：
def homepage(request):
menu_categories = enuCategory.objects.filter(active=True).values_list("title",flat=True)
foods = Food.objects.filter(active=True).values_list("name","category__title")
return render(request,'cafe/base.html',{'menu_categories ': menu_categories ,
'foods ':foods })
在您的html中：
<!DOCTYPE html>
<html>
<style>
.filterDiv {
float: left;
background-color: #2196F3;
color: #ffffff;
width: 100px;
line-height: 100px;
text-align: center;
margin: 2px;
display: none;
}
.show {
display: block;
}
.container {
margin-top: 20px;
overflow: hidden;
}
.btn {
border: none;
outline: none;
padding: 12px 16px;
background-color: #f1f1f1;
cursor: pointer;
}
.btn:hover {
background-color: #ddd;
}
.btn.active {
background-color: #666;
color: white;
}
</style>
<body>
<h2>Filter DIV Elements</h2>
<div id="myBtnContainer">
{% for category in categories %}
<button class="btn" onclick="filterSelection('{{category}}')"> {{category}}</button>
{% endfor %}
</div>
<div class="container">
{% for food in foods%}
<div class="filterDiv {{food.1}}">{{food.0}}</div>
{% endfor %}
</div>
<script>
filterSelection("all")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("filterDiv");
if (c == "all") c = "";
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}
function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
}
}
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}
// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function(){
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
</script>
此代码来自here
现在将有很多格式化工作要做，但我希望这会有所帮助。