Django 中的 Bootstrap3 选项卡 [英] Bootstrap3 tabs in Django

查看:24
本文介绍了Django 中的 Bootstrap3 选项卡的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想在我的应用中实现 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)等级 = 模型.CharField(max_length=20)

这是我的 state.py 模板:

{% 扩展 'base.html' %}{% 块内容 %}<h2>{{ state }}</h2>#This 工作并显示基于 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">高中</a></li>

{% for school_by_state %}<div id="content" class="tab-content"><div class="tab-pane active" id="all"><ul><li>{{ school.school_name }}</li>

<div class="tab-pane" id="high"><ul><li>{{ ???高中???}}

</div><!-- 结束内容--></div><!-- 结束行-->{% 结束为 %}{% 端块含量 %}

这是我的views.py:

from django.views.generic import ListView从 .models 导入学校类 StateListView(ListView):模型 = 学校模板名称 = 'state.html'context_object_name = 'schools_by_state'def get_queryset(self):state_list = self.kwargs['location_state']返回 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[A-Z]{2})/$', StateListView.as_view()),

我不相信我想在这里使用多个查询集,而是找到一种方法在highschool"的视图中向我的 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')返回上下文

然后在模板中循环schools_highschool.我觉得你的模板也有点不对.也许这样做:

{% 扩展 'base.html' %}{% 块内容 %}<h2>{{ state }}</h2>#This 工作并显示基于 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">高中</a></li>

<div id="content" class="tab-content"><div class="tab-pane active" id="all"><ul>{% for school_by_state %}<li>{{ school.school_name }}</li>{% 结束为 %}

<div class="tab-pane" id="high"><ul>{% for school in school_highschool %}<li>{{ school.school_name }}</li>{% 结束为 %}

</div><!-- 结束内容--></div><!-- 结束行-->{% 端块含量 %}

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

查看全文
相关文章
Python最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆