[英]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.