Django动态渲染多层菜单
为后续给菜单设置权限管理方便,通过给页面模版菜单动态渲染,通过数据菜单表进行匹配需要渲染的菜单
#Django表结构
class Menus(models.Model):
name = models.CharField(max_length=32, verbose_name=u'菜单名')
parent = models.ForeignKey('self',
verbose_name=u'父级菜单',
null=True,
blank=True,
default='',
help_text=u'如果添加的是子菜单,请选择父菜单')
show = models.BooleanField(verbose_name=u'是否显示',
default=False,
help_text=u'菜单是否显示,默认添加不显示')
url = models.CharField(max_length=300,
verbose_name=u'菜单url地址',
null=True,
blank=True,
default='javascript:void(0)',
help_text=u'是否给菜单设置一个url地址')
priority = models.IntegerField(verbose_name=u'显示优先级',
null=True,
blank=True,
default=-1,
help_text=u'菜单的显示顺序,优先级越大显示越靠前')
permission_id = models.IntegerField(verbose_name=u'权限编号',
help_text=u'给菜单设置一个编号,用于权限控制',
error_messages={'field-permission_id': u'只能输入数字'})
def __str__(self):
return "{parent}{name}".format(name=self.name, parent="%s-->" % self.parent.name if self.parent else '')
class Meta:
verbose_name = u"菜单"
verbose_name_plural = u"菜单"
ordering = ["-priority", "id"]
#admin.py from django.contrib import admin # Register your models here. from cloud.api import models as api_models class MenusAdmin(admin.ModelAdmin):
ordering = ('-parent',)
list_filter = ('name',)
list_display = ['name', 'parent', 'show', 'url', 'priority', 'permission_id']
fields = ['name', 'parent', 'show', 'url', 'priority', 'permission_id'] admin.site.register(api_models.Menus, MenusAdmin)
# 模版中件件,用于在页面返回且将菜单渲染出来 def make_menus_html(menus, parent_id=None, current_parent_id=None, active=None):
"""
menus = Menus.objects.all()
:param menus: 寻找的对象,传一个queryset对象
:param parent_id: 父级菜单ID
:param current_parent_id: 当前父级菜单ID
:param active: 激活的菜单名
:return:
"""
make_html = ""
for menu in menus:
child_menu_flag = "treeview"
menu_right_flag = '<span class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></span>'
child_menu = '<li><a href="{menu_url}"><i class="fa fa-circle-o"></i> {menu_name}</a></li>'
child_menu_html = '<ul class="treeview-menu">{make_child_menu_html}</ul>'
master_menu_html = """
<li class="{child_menu_flag} {active}">
<a href="{menu_url}"><i class="fa {menu_icon}"></i> <span>{menu_name}</span>{menu_right_flag}</a>
<ul class="treeview-menu">
{children_menu_html}
</ul>
</li>"""
children_menu_html = """
<li class="treeview">
<a href="{menu_url}"><i class="fa fa-circle-o"></i> <span>{menu_name}</span>{menu_right_flag}</a>
{child_menu_html}
</li>"""
parent = menu.parent # 获取当前菜单的父级菜单
if current_parent_id == menu.id or (not parent and current_parent_id):
continue # 如果当前父级菜单ID是自己或没有父级菜单且有当前父级ID则跳过本次循环
if not parent and current_parent_id is None: # 如果没有父级菜单且当前父级ID是None
make_children_menu_html = make_menus_html(menus, parent_id=parent_id, current_parent_id=menu.id)
if not make_children_menu_html:
menu_right_flag = ''
menu_icon = "fa-eye"
if hasattr(menu, 'icon_name'):
menu_icon = menu.icon_name
if menu.name == active:
active_menu = 'active'
else:
active_menu = ''
make_master_menu_html = master_menu_html.format(child_menu_flag=child_menu_flag,
active=active_menu,
menu_url=menu.url,
menu_icon=menu_icon,
menu_name=menu.name,
menu_right_flag=menu_right_flag,
children_menu_html=make_children_menu_html)
make_html += make_master_menu_html
elif parent and current_parent_id == parent.id: # 如果有父级且当前父级ID是自己的父级ID
make_child_menu_html = make_menus_html(menus, parent_id=current_parent_id, current_parent_id=menu.id)
if make_child_menu_html:
child_menu_html = child_menu_html.format(make_child_menu_html=make_child_menu_html)
children_menu_html = children_menu_html.format(menu_url=menu.url,
menu_name=menu.name,
menu_right_flag=menu_right_flag,
child_menu_html=child_menu_html)
else:
children_menu_html = child_menu.format(menu_url=menu.url, menu_name=menu.name)
make_html += children_menu_html
else:
continue
return make_html def make_menus_processor(request):
menus_obj = Menus.objects.all()
menus = make_menus_html(menus=menus_obj, active="监控")
return {'menus': format_html(menus)}
然后通过Django admin后台添加菜单数据,即可实现层叠动态可折叠菜单,该样式模版基于一个开源的管理模版
https://github.com/almasaeed2010/AdminLTE
Django动态渲染多层菜单的更多相关文章
- 动态渲染左侧菜单栏 :menu tree 动态渲染
其中后端代码不包含权限控制,同时支持二级(无子菜单) 和 三级菜单(无子菜单). 1.layui前端代码:(其他前端框架实现方法通用,不过需要修改js中append对应标签元素即可) <div ...
- layui navTree 动态渲染菜单组件介绍
navTree.js 简介 extends/navTree.js 是一个基于 layui 扩展的模块化组件,用于构建后台布局系统中的垂直导航菜单与水平导航菜单. extends/navTree.js ...
- 微信小程序-列表渲染多层嵌套循环
微信小程序-列表渲染多层嵌套循环 入门教程之列表渲染多层嵌套循环,目前官方的文档里,主要是一维数组列表渲染的案例,还是比较简单单一,给刚入门的童鞋还是无从入手的感觉. <view wx:for= ...
- Vue + Element UI 实现权限管理系统 前端篇(十):动态加载菜单
动态加载菜单 之前我们的导航树都是写死在页面里的,而实际应用中是需要从后台服务器获取菜单数据之后动态生成的. 我们在这里就用上一篇准备好的数据格式Mock出模拟数据,然后动态生成我们的导航菜单. 接口 ...
- Vue + Element UI 实现权限管理系统(动态加载菜单)
动态加载菜单 之前我们的导航树都是写死在页面里的,而实际应用中是需要从后台服务器获取菜单数据之后动态生成的. 我们在这里就用上一篇准备好的数据格式Mock出模拟数据,然后动态生成我们的导航菜单. 接口 ...
- jquery 根据后台传递过来的三维数组动态生成三级菜单
根据后台传递过来的三维数组动态生成三级菜单 <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- vue 动态渲染数据很慢或不渲染
vue 动态渲染数据很慢或不渲染 原因是因为vue检测速度很慢,因为多层循环了,在VUE 2.x的时候还能渲染出来,1.x的时候压根渲染不出来.解决方式:在动态改变数据的方法,第一行加上 this.$ ...
- django权限之二级菜单
遗漏知识点 1.构建表结构时,谁被关联谁就是主表,在层级删除的时候,删除子表的时候,主表不会被删除,反之删除主表的话,字表也会被删除, 使用related_name=None 反向查询,起名用的 ...
- 渲染导航菜单的同时给每个菜单绑定不同的router跳转
这个问题一开始的时候,我总想着router跳转只有两种方式 一种@click,一种router-link 然后我想着@click,绑定一个事件,事件下面无法确定我当前是哪个菜单,解决不了. 然后< ...
随机推荐
- 得到 window.open 新页面中的数据
1.htm 页面 单击按 '钮后' 调用window.open方法,开启新窗口 2.htm 想实现---------------------- 在2.htm页面单击按钮 将相应的数据返回到 1. ...
- Photoshop学习笔记
视频地址:PhotoshopCS5视频教程 1.打开文件的快捷方式:软件刚启动时,双击绘图区域 2.文件->新建,弹出的新建对话框中,包含了剪切板及纸张的相关信息 3.图像缩放快捷方式:ctrl ...
- Debian8.3如何设置默认不启动Gnome
最近又光荣的回归了debian的怀抱,其实我就是跟风,现在做传媒平时也用不到多么高深的计算机知识,纯粹自己瞎鼓捣……嘿嘿,我相信有很多像我一样的人,刚刚装上了debian可以在同事面前华丽丽的装了一逼 ...
- 适配各种Windows分辨率,为DPI添加感知,当在高DPI时,禁用WINFORM缩放等。
因为现在高分屏越来越多,很多windows设备必须设置高DPI,这样很容易导致WINFORM整体错位,因此我们需要自己适配.禁止缩放 在程序配置清单 mainfest中添加如下. <assemb ...
- Linux下GNOME桌面的安装
yum grouplist //列出yum仓库里的软件组列表 GNOME桌面的安装 yum install soft1 soft2 //使用yum源安装软件 yum groupinstall grou ...
- 求一个区间[a,b]中数字1出现的次数
问题来源:http://ac.jobdu.com/problem.php?pid=1373 举例:如果n=10 那么1-10之间的1的个数是2(1,2,3,4,...10) 这其中有一个规律: 挨着看 ...
- Echarts 3.19 制作常用的图形 非静态
最近阿里内部使用的 图表也向外开放了 而百度就好像更有良心一点,Echarts 早就开放了 . 自己学Echarts的时候走了很多的弯路,毕竟谁让自己菜呢,多撞几次南墙才晓得疼 才知道学习方法,新手上 ...
- code first提示已有打开的与此 Command 相关联的 DataReader,必须首先将它关闭解决方法
使用codefirst查询当然是必不可少的,但有时不小心可能很简单的查询也会导致异常. 下面用codefirst做个示例简单演示下异常发生的场景: var attendlist = db.Databa ...
- webkit 模拟点击 winform
刚在园子里看到有博主将WebBowser控件替换为Chrome内核(),链接http://www.cnblogs.com/gdyblog/p/WebKitBrowser.html 于是我想既然实现了替 ...
- EF多对多更新报错(TableNoTracking引发的bug)
实体映射关系如下,SISTUser和SISTUserRoles存在多对多的关系,生成中间表 public partial class SISTUserMap: EntityTypeConfigurat ...