Django中的Bootstrap3选项卡 [英] Bootstrap3 tabs in Django
问题描述
我想在我的应用程序中实施 Bootstrap3选项卡，其中按状态显示学校数据。因此，如果您访问example.com/ma/，您将看到有关马萨诸塞州和标签的信息，以按年级排序。
我已经使用查询器按状态进行过滤，因此在example.com/ma/上只显示ma结果。我可以在其中一个选项卡中显示所有数据，但不能将其过滤出来用于多个选项卡。为了保持简单，我只想在这里选择全部和高中。
这是我的models.py ：
from django.db import models
class School（models.Model）：
school_name = models .CharField（max_length = 200）
location_state = models.CharField（max_length = 2）
scores = models.CharField（max_length = 20）
以下是我的模板，用于 state.py ：
{％extends'base.html'％}
{％block content％}
< h2> {{state}}< / h2> ＃这个工作并显示基于URL的状态
< div class =row>
< div class =col-12 col-sm-12 col-lg-12>
< ul class =nav nav-tabsid =myTab>
< li class =active>< a href =＃all>全部< / a>< / li>
< li>< a href =＃high>高中< / a>< / li>
< / ul>
< / div>
{％for school_by_state％}
< div id =contentclass =tab-content>
< div class =tab-pane activeid =all>
< ul>
< li> {{school.school_name}}< / li>
< / ul>
< / div>
< div class =tab-paneid =high>
< ul>
< li> {{??? highschool ??? }}< /锂>
< / ul>
< / div>
< / div><！ - 结束内容 - >
< / div><！ - 结束行 - >
{％endfor％}
{％endblock content％}
这里是我的 views.py ：
from django.views.generic import ListView
from .models import学校
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']}）
返回上下文
为了完整，这里是这个视图的urls.py ：
url（r'^（？P< location_state> [AZ] { 2}）/ $'，StateListView.as_view（）），
我不相信我想在这里使用多个querysets，而是找到一种方法来在我的context_data中添加一个额外的过滤器查看highschool，然后我可以添加到我的模板。但是我尝试添加其他上下文过滤器都失败了。想法？
您可以在上下文中添加新的查询集：
$ {code> def get_context_data（self，** kwargs）：
context = super（StateListView，self）.get_context_data（** kwargs）
context.update（{ 'state'：self.kwargs ['location_state']}）
上下文['schools_highschool'] = context ['schools_by_state']。filter（grade ='9-12'）
返回上下文
然后循环 schools_highschool 在模板中。我认为你的模板也有点偏离。也许这样做：
{％extends'base.html'％}
{％block content ％}
< h2> {{state}}< / h2> ＃这个工作并显示基于URL的状态
< div class =row>
< div class =col-12 col-sm-12 col-lg-12>
< ul class =nav nav-tabsid =myTab>
< li class =active>< a href =＃all>全部< / a>< / li>
< li>< a href =＃high>高中< / a>< / li>
< / ul>
< / div>
< div id =contentclass =tab-content>
< div class =tab-pane activeid =all>
< ul>
{％for school_by_state％}
< li> {{school.school_name}}< / li>
{％endfor％}
< / ul>
< / div>
< div class =tab-paneid =high>
< ul>
{％for school_highschool％}
< li> {{school.school_name}}< / li>
{％endfor％}
< / ul>
< / div>
< / div><！ - 最终内容 - >
< / div><！ - 结束行 - >
{％endblock content％}
I want to implement Bootstrap3 tabs in my app, which displays school data by state. So if you go to example.com/ma/ you will see information for the state of Massachusetts and tabs to sort by grade level.
I am already using the queryset to filter by state so that on example.com/ma/ only "ma" results appear. And I can show ALL data in one of the tabs, but can't filter it out for multiple tabs. To keep it simple, I just want to do tabs for "All" and "High School" here.
Here is my models.py: from django.db import models
class School(models.Model):
school_name = models.CharField(max_length=200)
location_state = models.CharField(max_length=2)
grades = models.CharField(max_length=20)
Here is my template for 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 %}
And here is my 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
For completeness, here is the urls.py for this view:
url(r'^(?P<location_state>[A-Z]{2})/$', StateListView.as_view()),
I don't believe I want to use multiple querysets here, but instead find a way to add an additional filter to my context_data in the view for "highschool" which I can then add to my template. However my attempts to add additional context filters have all failed. Thoughts?
You can just add a new queryset to the context:
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
Then loop schools_highschool in the template. I think your template is a little off too. Maybe do this:
{% 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 %}
这篇关于Django中的Bootstrap3选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
