Django 中的 Bootstrap3 选项卡

Question

我想在我的应用程序中实现 Bootstrap3 选项卡，它按州显示学校数据。因此，如果您转到 example.com/ma/您将看到马萨诸塞州的信息以及按年级排序的选项卡。

我已经使用查询集按状态过滤，以便在 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添加一个额外的过滤器，然后我可以将其添加到我的模板中。但是，我添加其他上下文过滤器的尝试都失败了。思潮？

Answer 1

您可以向上下文添加新的查询集：

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 %}

Answer 2

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 -->