[英]Bootstrap3 tabs in Django
我想在我的應用程序中實現Bootstrap3選項卡 ,該選項卡按州顯示學校數據。 因此,如果您轉到example.com/ma/,您將看到馬薩諸塞州的信息以及按年級排序的標簽。
我已經在使用queryset按狀態進行過濾,以便在example.com/ma/上僅顯示“ ma”結果。 而且我可以在其中一個標簽中顯示所有數據,但不能為多個標簽過濾掉它們。 為簡單起見,我只想在此處為“全部”和“高中”做標簽。
這是我的models.py :從django.db導入模型
class School(models.Model):
school_name = models.CharField(max_length=200)
location_state = models.CharField(max_length=2)
grades = models.CharField(max_length=20)
這是我的state.py模板:
{% extends 'base.html' %}
{% block content %}
<h2>{{ state }}</h2> #This works and shows the state based on the URL
<div class="row">
<div class="col-12 col-sm-12 col-lg-12">
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#all">All</a></li>
<li><a href="#high">High School</a></li>
</ul>
</div>
{% for school in schools_by_state %}
<div id="content" class="tab-content">
<div class="tab-pane active" id="all">
<ul>
<li>{{ school.school_name }}</li>
</ul>
</div>
<div class="tab-pane" id="high">
<ul>
<li>{{ ???highschool??? }}</li>
</ul>
</div>
</div><!-- end content -->
</div><!-- end row -->
{% endfor %}
{% endblock content %}
這是我的views.py :
from django.views.generic import ListView
from .models import School
class StateListView(ListView):
model = School
template_name = 'state.html'
context_object_name = 'schools_by_state'
def get_queryset(self):
state_list = self.kwargs['location_state']
return School.objects.filter(location_state=state_list)
def get_context_data(self, **kwargs):
context = super(StateListView, self).get_context_data(**kwargs)
context.update({'state': self.kwargs['location_state']})
return context
為了完整起見 ,以下是此視圖的urls.py :
url(r'^(?P<location_state>[A-Z]{2})/$', StateListView.as_view()),
我不相信我要在此處使用多個查詢集,而是找到一種方法在“高中”視圖中向我的context_data添加一個附加過濾器,然后將其添加到模板中。 但是,我添加其他上下文過濾器的嘗試均失敗了。 思考?
您可以將新的查詢集添加到上下文中:
def get_context_data(self, **kwargs):
context = super(StateListView, self).get_context_data(**kwargs)
context.update({'state': self.kwargs['location_state']})
context['schools_highschool'] = context['schools_by_state'].filter(grades='9-12')
return context
然后在模板中循環schools_highschool
。 我認為您的模板也有些不足。 也許這樣做:
{% extends 'base.html' %}
{% block content %}
<h2>{{ state }}</h2> #This works and shows the state based on the URL
<div class="row">
<div class="col-12 col-sm-12 col-lg-12">
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#all">All</a></li>
<li><a href="#high">High School</a></li>
</ul>
</div>
<div id="content" class="tab-content">
<div class="tab-pane active" id="all">
<ul>
{% for school in schools_by_state %}
<li>{{ school.school_name }}</li>
{% endfor %}
</ul>
</div>
<div class="tab-pane" id="high">
<ul>
{% for school in schools_highschool %}
<li>{{ school.school_name }}</li>
{% endfor %}
</ul>
</div>
</div><!-- end content -->
</div><!-- end row -->
{% endblock content %}
jproffitts答案是正確的,但是您也可以根據模板中的這一查詢集進行過濾:
<div id="content" class="tab-content">
<div class="tab-pane active" id="all">
<ul>
{% for school in schools_by_state %}
<li>{{ school.school_name }}</li>
{% endfor %}
</ul>
</div>
<div class="tab-pane" id="high">
<ul>
{% for school in schools_by_state %}
{% if school.grade == "9-12" %}
<li>{{ school.school_name }}</li>
{% endif %}
{% endfor %}
</ul>
</div>
</div><!-- end content -->
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.