网站建设自主开发的三种方式,做网站的猫腻,软件定制系统,建筑之家多级权限菜单设计级标题栏 我们现在只有数据展示,要进入其他url还需要手动的输入路径,非常的麻烦,所以我们要设计 一个导航栏以及侧边多级菜单栏,这个展示是通过stark组件的设计的增删改查页面,而 每一个 页面我们都需要有导航栏和侧边的权限菜单栏,所以把这个公共的部分提起到…多级权限菜单设计级标题栏 我们现在只有数据展示,要进入其他url还需要手动的输入路径,非常的麻烦,所以我们要设计 一个导航栏以及侧边多级菜单栏,这个展示是通过stark组件的设计的增删改查页面,而 每一个 页面我们都需要有导航栏和侧边的权限菜单栏,所以把这个公共的部分提起到一个网页,让增删改 继承这个页面就可以了. base.html(这要是自己的样式以及设计盒子让其他网页进行继承) {% load staticfiles %}
!DOCTYPE html
html langen
headmeta charsetUTF-8titleCRM/titlelink relshortcut icon href/static /imgs/luffy-study-logo.pnglink relstylesheet href/static/bootstrap/css/bootstrap.css/link relstylesheet href/static/font-awesome/css/font-awesome.css/link relstylesheet href/static/css/commons.css/link relstylesheet href/static/css/nav.css/script src/static/js/jquery-3.3.1.min.js/scriptstyle.pg-body .left-menu {background-color: #F3F3F3;position: absolute;left: 1px;top: 60px;bottom: 0;width: 220px;overflow: auto;}.pg-body .right-body {position: absolute;left: 225px;right: 0;top: 60px;bottom: 0;overflow: scroll;border-top: 0;font-size: 13px;min-width: 755px;padding: 20px;}.dropdown-menu {top: 118%;left: -108px;}a:hover{text-decoration: none!important;}/style{% block css %}{% endblock %}/head
bodydiv classpg-headerdiv classnavdiv classlogo-area lefta href#img classlogo src{% static imgs/logo.svg %}span stylefont-size: 18px;CRM /span/a/divdiv classleft-menu lefta classmenu-item资产管理/aa classmenu-item用户信息/aa classmenu-item权限管理/adiv classmenu-itemspan使用说明/spani classfa fa-caret-down aria-hiddentrue/idiv classmore-infoa href# classmore-item666/aa href# classmore-item888/a/div/div/divdiv classright-menu right clearfix!-- Single button --div classbtn-group user-info rightimg classdropdown-toggle data-toggledropdown aria-haspopuptrue aria-expandedfalse width50 height50 classimg-circle src{% static imgs/default.jpg %}ul classdropdown-menu smalllia href# classmore-item{{request.user.name}}个人信息/a/lilia href/logout/ classmore-item注销/a/lilia href/home/修改密码/a/lilia href/home/更换头像/a/li/ul/diva classuser-menu righti classfa fa-user aria-hiddentrue/ispan{{ request.user }}/span/aa classuser-menu right消息i classfa fa-commenting-o aria-hiddentrue/ispan classbadge bg-success2/span/aa classuser-menu right通知i classfa fa-envelope-o aria-hiddentrue/ispan classbadge bg-success2/span/aa classuser-menu right任务i classfa fa-bell-o aria-hiddentrue/ispan classbadge bg-danger4/span/a/div/div
/divdiv classpg-body{# 左侧栏 #}div classleft-menu{% block side_bar %}{# 自定义标签 #}{% load rbac %}{% get_menu_list request %}{% endblock side_bar %}/div{# 右侧栏数据体 #}div classright-body{% block content %}{% endblock content %}/div
/div{% block js %}{% endblock %}
/body
/html 让页面继承了相应的盒子之后,我么就会得到如下样式 那怎么把我们的多级菜单权限展现在右边呢? 这里需要要到一个新的语法(关于自定义模板标签) 建立如下文件夹 rbac.py from django import template
from ..models import Permission
register template.Library()register.inclusion_tag(rbac/menu.html)
def get_menu(request):print(OK...)permission_list request.session.get(permission_list) #获取权限列表menu_list []for per in permission_list:if per.get(type) menu: #如果是菜单列表加入列表,返回列表和menu.html渲染menu_list.append(per)return {default_data: default_data} menu.html div idtreeview classsmall/divscript src/static/bootstrap-treeview/js/bootstrap-treeview.js/script
script typetext/javascript// API文档参数列表: https://www.cnblogs.com/tangzeqi/p/8021637.html$(function() {var options {data:{{ default_data|safe }} , //data属性是必须的是一个对象数组 Array of Objects.color: , //所有节点使用的默认前景色这个颜色会被节点数据上的backColor属性覆盖. StringbackColor: #000000, //所有节点使用的默认背景色这个颜色会被节点数据上的backColor属性覆盖. StringborderColor: #000000, //边框颜色。如果不想要可见的边框则可以设置showBorder为false。 StringnodeIcon: glyphicon glyphicon-stop, //所有节点的默认图标checkedIcon: glyphicon glyphicon-check, //节点被选中时显示的图标 StringcollapseIcon: glyphicon glyphicon-minus, //节点被折叠时显示的图标 StringexpandIcon: glyphicon glyphicon-plus, //节点展开时显示的图标 StringemptyIcon: glyphicon, //当节点没有子节点的时候显示的图标 StringenableLinks: false, //是否将节点文本呈现为超链接。前提是在每个节点基础上必须在数据结构中提供href值。 BooleanhighlightSearchResults: true, //是否高亮显示被选中的节点 Booleanlevels: 2, //设置整棵树的层级数 IntegermultiSelect: false, //是否可以同时选择多个节点 BooleanonhoverColor: #F5F5F5, //光标停在节点上激活的默认背景色 StringselectedIcon: glyphicon glyphicon-stop, //节点被选中时显示的图标 StringsearchResultBackColor: , //当节点被选中时的背景色searchResultColor: , //当节点被选中时的前景色selectedBackColor: , //当节点被选中时的背景色selectedColor: #FFFFFF, //当节点被选中时的前景色showBorder: true, //是否在节点周围显示边框showCheckbox: false, //是否在节点上显示复选框showIcon: true, //是否显示节点图标showTags: false, //是否显示每个节点右侧的标记。前提是这个标记必须在每个节点基础上提供数据结构中的值。uncheckedIcon: glyphicon glyphicon-unchecked, //未选中的复选框时显示的图标可以与showCheckbox一起使用};$(#treeview).treeview({color: #4F4F4F,expandIcon: glyphicon glyphicon-chevron-right,collapseIcon: glyphicon glyphicon-chevron-down,nodeIcon: glyphicon glyphicon-bookmark,enableLinks: true,levels: 1,showIcon:false,selectedBackColor: ,selectedColor: #333,data: {{ default_data|safe }},});$(#treeview).on(nodeSelected,function(event, data) {console.log(data);})});
/script 然后在base里面调用这个自定义标签 {# 左侧栏 #}div classleft-menu{% block side_bar %}自定义标签{% load rbac %}{% get_menu_list request %}{% endblock side_bar %}/div 整个流程: 那如何把数据动态的添加到侧边栏呢?我们需要修改代码 rbac.py register.inclusion_tag(rbac/menu.html)
def get_menu_list(request):permission_list request.session.get(permission_list)permission_dic {}for per_dic in permission_list:if per_dic[type] button:continue # 过滤掉button权限,我们只要菜单权限new_per_dic {} # 对菜单权限的数据按照treeview的数据结构构建新的字典new_per_dic[text] per_dic[title]new_per_dic[href] per_dic[url]new_per_dic[nodes] []new_per_dic[parent_id] per_dic[parent_id]permission_dic[per_dic.get(id)] new_per_dic # 以自己的权限主键为键,以新构建的字典为值,构造新的字典print(, permission_dic)permission_tree_list [] # 整个数据大列表for per_id, per_dic in permission_dic.items():pid per_dic.get(parent_id) # 取每一个字典中的父idif not pid: # 没有父id(最高权限),就直接加入数据大列表permission_tree_list.append(per_dic)else: # 有父id就加入父id队对应的那个的node(一个列表)permission_dic[pid][nodes].append(per_dic)# 展开节点current_path request.pathif current_path per_dic.get(href):pid per_dic.get(parent_id)per_dic[emptyIcon]while pid:permission_dic[pid][state] {expanded: True}pid permission_dic[pid][parent_id]return {permission_tree_list: json.dumps(permission_tree_list)} #前端不需要反序列化,bootstrap treeview会帮你做 我们会得到如下页面: 转载于:https://www.cnblogs.com/tjp40922/p/10311183.html
