使用django + layui实现侧边栏多级菜单的功能

最新推荐文章于 2024-10-17 08:40:46 发布

tuxinhang

最新推荐文章于 2024-10-17 08:40:46 发布

阅读量6.2k

点赞数 1

分类专栏： python 文章标签： django 自定义标签 layui 多级菜单图标扩展

本文链接：https://blog.csdn.net/tuxinhang/article/details/78970784

版权

本文介绍了如何结合Django框架和LayUI前端库，自定义标签来创建支持多级展示和子菜单缩进的侧边栏菜单。通过JavaScript进一步实现了点击展开和收起菜单的功能。

摘要由CSDN通过智能技术生成

layui本身是个非常棒的前段框架，自带的也有侧边栏功能，不过不支持多级，子菜单也没有缩进，因此，我做了些调整。

树形菜单是通过Django的自定义标签渲染的。自定义标签代码如下：

def is_ancestor(current, menu):
    """
    menu是否current的祖先
    :param current: 当前菜单
    :param menu:
    :return: bool
    """
    parent_id = current.parent_id
    while parent_id != 0:
        if parent_id == menu.unique_id:
            return True
        try:
            parent_id = Menu.objects.get(pk=parent_id).parent_id
        except Menu.DoesNotExist:
            return False
    return current.unique_id == menu.unique_id


@register.simple_tag(takes_context=True)
def side_bar(context):
    root_menus = context["root_menus"]
    current_menu = context["current_menu"]
    request = context["request"]
    html = '<ul class=" layui-nav layui-nav-tree">'
    lists = []
    for menu in root_menus:
        # menu为根菜单，也就是一级菜单
        menu = ObjectDict(menu)
        # 确保右对齐，每个字的默认宽度为12px
        arrow_distance = 120 - len(menu.name) * 12
        url = menu.url or "javascript:;"
        if url == request.path or is_ancestor