如何在模板中包含带有django-mptt的下拉菜单 [英] How to include dropdown menu with django-mptt in template

问题描述

我希望能够使用管理面板创建下拉菜单.目前，在模型中，我可以选择子页面是否是另一个子页面的子页面，以及应按什么顺序显示它.但是我不知道如何在模板中一起实现所有这些功能.有人可以帮忙吗?

I want to be able to create dropdown menu using admin panel. At this moment in model I can choose if subpage is children of another and in what order it should be displayed. But I don't know how to implement all of this together in template. Can anyone help please?

型号:

class Subpage(MPTTModel):

    title = models.CharField(max_length=254)
    slug = models.SlugField(unique=True)
    display_order = models.IntegerField(default=1)
    parent = TreeForeignKey('self', verbose_name='is child:', on_delete=models.CASCADE, null=True, blank=True)

视图:

def generated_page(request, slug):
    unique_subpage = get_object_or_404(Subpage, slug=slug)
    homepage = Homepage.objects.first()
    subpage_sorted = Subpage.objects.exclude(is_active=False).order_by('display_order')

    context = {
            'unique_subpage': unique_subpage,
            'subpage_sorted': subpage_sorted,
            'homepage': homepage,
        }   

    if unique_subpage.is_active or unique_subpage.slug == 'admin':
        return render(request, 'subpage.html', context)
    else:
        return render(request, '404.html', context)

模板:

        {% recursetree subpage_sorted %}
          <li class="nav-item dropdown">
            {% if not node.is_child_node %}
              <a class="nav-link" href="{% url 'generated_page' node.slug  %}">{% trans node.title %}</a>
            {% elif node.is_child_node %}
              <a class="nav-link dropdown-toggle" href="{% url 'generated_page' node.parent.slug  %}" data-toggle="dropdown"  role="button" aria-haspopup="true" aria-expanded="false">{% trans node.parent.title %}</a>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="{% url 'generated_page' node.slug  %}">{% trans node.title %}</a>
            {% endif %}
          </li>
        {% endrecursetree %}

推荐答案

此代码可能会有所改进，因此请修改(在我的项目中有效):

This code can probably be improved upon so please revise (works in my project):

<ul class="navbar-nav mr-auto">
          {% recursetree thecategories %}
          {% if node.level == 0 %}
          {% if not node.is_leaf_node %}
          <!-- Let op: <li> tag wordt steeds onderaan aangevuld, ander werkt het niet...-->
          <li class="dropdown nav-item">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
              aria-expanded="false">
              <span class="mainBarItem">{{ node.ctg_Title }}<span class="caret"></span> </span></a>
            {% else %}
          <li><a href="#" class="mainBarItem">{{ node.ctg_Title }}</a>
            {% endif %}

            {% else %}
            {% if not node.is_leaf_node %}
          <li class="dropdown-submenu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
              aria-expanded="false">
              <span class="nav-label">{{ node.ctg_Title }}<span class="caret"></span></span></a>
            {% else %}
          <li><a href="#">{{ node.ctg_Title }}</a>
            {% endif %}
            {% endif %}

            {% if not node.is_leaf_node %}
            <ul class="children dropdown-menu">
              {{ children }}
            </ul>
            {% endif %}
          </li>

          {% endrecursetree %}
        </ul>

您还需要其他CSS和javascript:

You also need additional css and javascript:

.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-submenu:hover>.dropdown-menu{display:block;}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover>a:after{border-left-color:#ffffff;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}

<script type="text/javascript">
    $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function (event) {
        // Avoid following the href location when clicking
        event.preventDefault();
        // Avoid having the menu to close when clicking
        event.stopPropagation();
        // If a menu is already open we close it
        $('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
        // opening the one you clicked on
        $(this).parent().addClass('open');
    });
</script>

这篇关于如何在模板中包含带有django-mptt的下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！