Onglets bootstrap3 à Django

Question

Je veux implémenter Onglets Bootstrap3 Dans mon application, qui affiche les données scolaires par état. Donc, si vous allez sur exemple.com/ma/, vous verrez des informations pour l'état du Massachusetts et des onglets à trier par niveau scolaire.

J'utilise déjà la questiont pour filtrer par état afin que sur exemple.com/ma/ seuls les résultats "ma" apparaissent. Et je peux afficher toutes les données dans l'un des onglets, mais je ne peux pas le filtrer pour plusieurs onglets. Pour rester simple, je veux juste faire des onglets pour "tous" et "lycée" ici.

Voici mon modèles.py: des modèles d'importation 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)

Voici mon modèle pour 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 %}

Et voici mon 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

Pour l'exhaustivité, voici urls.py Pour cette vue:

url(r'^(?P<location_state>[A-Z]{2})/$', StateListView.as_view()),

Je ne crois pas que je souhaite utiliser plusieurs queysets ici, mais je trouve plutôt un moyen d'ajouter un filtre supplémentaire à mon context_data dans la vue pour "lycée" que je peux ensuite ajouter à mon modèle. Cependant, mes tentatives d'ajouter des filtres de contexte supplémentaires ont tous échoué. Les pensées?

Answer 1

Vous pouvez simplement ajouter une nouvelle questiont au contexte:

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

Puis boucle schools_highschool dans le modèle. Je pense que votre modèle est un peu éteint aussi. Peut-être faites ceci:

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

La réponse JProffitts est correcte, mais vous pouvez également filtrer en fonction de cet ensemble de requête dans votre modèle:

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