Django의 Bootstrap3 탭

Question

구현하고 싶습니다 Bootstrap3 탭 내 앱에서 학교 데이터를 주별로 표시합니다. 따라서 example.com/ma/로 이동하면 매사추세츠 주 및 탭에 대한 정보가 학년별로 정렬됩니다.

example.com/ma/에만 "ma"결과가 나타나도록 이미 쿼리 세트를 상태별로 필터링하고 있습니다. 탭 중 하나에 모든 데이터를 표시 할 수 있지만 여러 탭에서 필터링 할 수는 없습니다. 간단하게 유지하기 위해 여기서 "All"및 "High School"에 대한 탭을하고 싶습니다.

여기, 내 것이요 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()),

여기에서 여러 쿼리 세트를 사용하고 싶지 않다고 생각하지만 대신 "Highschool"을보기에서 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 -->