Question

我99％确定我没有使用正确的名称，但我试图找到有关如何创建看起来和行为类似于博客存档菜单的菜单的信息（只是正确的名称已经帮助我查看正确的地方）。具体来说，能够点击顶级字段然后获取所有孩子，请参阅以下示例：

我的目的是创建这样一个菜单，然后使用我的数据库中的字段，其中一个虚构的条目如下：

class foo(models.Model):
    a = models.CharField(max_length=200)
    b = models.CharField(max_length=200)
    c = models.CharField(max_length=200)

菜单会显示a的所有唯一值作为顶级（如示例中的年份），点击它会显示所有唯一的b值（如示例中的月份），单击该列表将列出所有单独的相应条目。

我更喜欢这样一个菜单的正确名称，如果可能的话，还有一些关于如何使用django创建类似概念的文档/指南。

Answer 1

我已经成功使用了一些bootstrap和django。

视图已生成，因此它是一个查询集列表，如下所示（enzyme_activity_type=types.values()[0]是我不喜欢的唯一一点：

class IndexView(generic.ListView):
    template_name = 'gts/index.html'
    context_object_name = 'latest_enzyme_list'

    def get_queryset(self):
        try:
            resultList = []
            for types in Enzymes.objects.values('enzyme_activity_type').distinct():                 
                 resultList.append(Enzymes.objects.filter(enzyme_activity_type=types.values()[0]))
            return resultList
        except:
            return Enzymes.objects.none()

使用queryset和bootstrap的html模板（bootstrap和javascript的相关位在base.html中）：

{% extends 'base.html' %}

{% block body %}

<div class="section" id="s-module-django.db.models.fields">
    <h1 class="page-header text-primary">Glycoenzymes for Bioindustries</h1>   
    <div>
        <p>Complete list of all enzymes in the database:</p>
    </div>

    {% if latest_enzyme_list %}
        <ul>
        {% for enzyme_type in latest_enzyme_list %}
            <div class="panel-heading">
                <button type="button" class="btn btn-info" data-toggle="collapse" href="#{{enzyme_type.first.enzyme_activity_type|cut:" "}}">
                    {{enzyme_type.first.enzyme_activity_type}}
                </button>
            </div>
            <div id="{{enzyme_type.first.enzyme_activity_type|cut:" "}}" class="panel-collapse collapse">
            {% for enzyme in enzyme_type %}
                <div><a href="{% url 'gts:detail' enzyme.id %}"><li>{{ enzyme.barcode  }}</li></a></div>
            {% endfor %}
            </div>
        {% endfor %}
        </ul>
    {% else %}
        <p>No enzymes are available.</p>
    {% endif %}
</div>

{% endblock %}

摘自base.html（以说明引导包含）：

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}"/>
</head>
<body>
  {% block body %}
  {% endblock %}

<!------- Bootstrap + JQuery JS---------> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="{% static 'scripts/bootstrap.min.js' %}"></script> 

</body>
</html>

这会生成以下图片（第一项＆＃39;已激活＆＃39;）：

如果我修改它的方式应该以任何方式改变Django编程，请发表评论。

django

1 个答案: