树形菜单js

文章目录 [+]

一、什么是树形菜单？

树形菜单是一种网站导航结构，它以树状形式展示菜单项，使得用户可以清晰地看到各个菜单项之间的关系，树形菜单通常用于组织复杂的信息结构，如企业网站的导航栏、CMS系统的分类目录等，在Django中，我们可以通过递归的方式实现树形菜单的展示。

二、如何在Django中实现树形菜单？

1. 定义数据模型

我们需要在Django的数据模型中定义一个表示菜单项的模型，这个模型需要包含以下字段：标题、URL、父级菜单项ID(用于表示菜单项之间的层级关系)。

from django.db import models

class Menu(models.Model):
    title = models.CharField(max_length=100)
    url = models.CharField(max_length=200)
    parent = models.ForeignKey('self', null=True, blank=True, on_delete=models.CASCADE)

2. 创建视图函数

接下来，我们需要创建一个视图函数来处理用户的请求，这个视图函数需要接收一个参数，即当前登录用户的ID，根据这个ID查询出该用户有权限访问的所有菜单项，我们需要遍历这些菜单项，找到所有没有子菜单项的菜单项，并将它们添加到一个列表中，将这个列表传递给模板进行渲染。

from django.shortcuts import render
from .models import Menu

def tree_menu(request):
    user = request.user
    menu_items = Menu.objects.filter(user=user).exclude(parent__isnull=False)
    tree_items = []
    for item in menu_items:
        if not item.get_children().exists():
            tree_items.append(item)
    return render(request, 'tree_menu.html', {'tree_items': tree_items})

3. 创建模板文件

在模板文件中，我们需要使用递归的方式来渲染树形菜单，我们需要创建一个基本的HTML结构，包括一个无序列表和一个占位符，我们需要遍历树形菜单中的每个菜单项，为每个菜单项生成一个列表项，如果一个菜单项有子菜单项，我们需要递归地调用这个函数来渲染子菜单项，将生成的HTML代码插入到占位符的位置。

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>树形菜单</title>
</head>
<body>
    <ul>
        {% for item in tree_items %}
            <li>
                {{ item.title }}
                {% if item.get_children %}
                    <ul>
                        {% with children=item.get_children %}
                            {% include "tree_menu.html" %}
                        {% endwith %}
                    </ul>
                {% endif %}
            </li>
        {% endfor %}
    </ul>
</body>
</html>

4. URL配置