多级权限菜单设计级标题栏

　　我们现在只有数据展示,要进入其他url还需要手动的输入路径,非常的麻烦,所以我们要设计

一个导航栏以及侧边多级菜单栏,这个展示是通过stark组件的设计的增删改查页面,而 每一个

页面我们都需要有导航栏和侧边的权限菜单栏,所以把这个公共的部分提起到一个网页,让增删改

继承这个页面就可以了.

　　base.html(这要是自己的样式以及设计盒子让其他网页进行继承)

  1. {% load staticfiles %}
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>CRM</title>
  7.     <link rel="shortcut icon" href="/static /imgs/luffy-study-logo.png">
  8.     <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css"/>
  9.     <link rel="stylesheet" href="/static/font-awesome/css/font-awesome.css"/>
  10.     <link rel="stylesheet" href="/static/css/commons.css"/>
  11.     <link rel="stylesheet" href="/static/css/nav.css"/>
  12.     <script src="/static/js/jquery-3.3.1.min.js"></script>
  13.     <style>
  14.  
  15.         .pg-body > .left-menu {
  16.             background-color: #F3F3F3;
  17.             position: absolute;
  18.             left: 1px;
  19.             top: 60px;
  20.             bottom: 0;
  21.             width: 220px;
  22.             overflow: auto;
  23.         }
  24.  
  25.         .pg-body > .right-body {
  26.             position: absolute;
  27.             left: 225px;
  28.             right: 0;
  29.             top: 60px;
  30.             bottom: 0;
  31.             overflow: scroll;
  32.             border-top: 0;
  33.             font-size: 13px;
  34.             min-width: 755px;
  35.             padding: 20px;
  36.         }
  37.  
  38.         .dropdown-menu {
  39.             top: 118%;
  40.             left: -108px;
  41.         }
  42.  
  43.         a:hover{
  44.                 text-decoration: none!important;
  45.             }
  46.  
  47.     </style>
  48.  
  49.    {% block css %}
  50.  
  51.    {% endblock %}
  52.  
  53. </head>
  54. <body>
  55.  
  56. <div class="pg-header">
  57.     <div class="nav">
  58.         <div class="logo-area left">
  59.             <a href="#">
  60.                 <img class="logo" src="{% static 'imgs/logo.svg' %}">
  61.                 <span style="font-size: 18px;">CRM </span>
  62.             </a>
  63.         </div>
  64.  
  65.         <div class="left-menu left">
  66.             <a class="menu-item">资产管理</a>
  67.             <a class="menu-item">用户信息</a>
  68.             <a class="menu-item">权限管理</a>
  69.             <div class="menu-item">
  70.                 <span>使用说明</span>
  71.                 <i class="fa fa-caret-down" aria-hidden="true"></i>
  72.                 <div class="more-info">
  73.                     <a href="#" class="more-item">666</a>
  74.                     <a href="#" class="more-item">888</a>
  75.                 </div>
  76.             </div>
  77.         </div>
  78.  
  79.         <div class="right-menu right clearfix">
  80.  
  81.             <!-- Single button -->
  82.             <div class="btn-group user-info right">
  83.               <img class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" width="" height="" class="img-circle" src="{% static 'imgs/default.jpg' %}">
  84.  
  85.               <ul class="dropdown-menu small">
  86.                 <li><a href="#" class="more-item">{{request.user.name}}个人信息</a></li>
  87.                 <li><a href="/logout/" class="more-item">注销</a></li>
  88.                 <li><a href="/home/">修改密码</a></li>
  89.                 <li><a href="/home/">更换头像</a></li>
  90.               </ul>
  91.             </div>
  92.  
  93.             <a class="user-menu right">
  94.                 <i class="fa fa-user" aria-hidden="true"></i>
  95.                 <span>{{ request.user }}</span>
  96.             </a>
  97.  
  98.             <a class="user-menu right">
  99.                 消息
  100.                 <i class="fa fa-commenting-o" aria-hidden="true"></i>
  101.                 <span class="badge bg-success">2</span>
  102.             </a>
  103.  
  104.             <a class="user-menu right">
  105.                 通知
  106.                 <i class="fa fa-envelope-o" aria-hidden="true"></i>
  107.                 <span class="badge bg-success">2</span>
  108.             </a>
  109.  
  110.             <a class="user-menu right">
  111.                 任务
  112.                 <i class="fa fa-bell-o" aria-hidden="true"></i>
  113.                 <span class="badge bg-danger">4</span>
  114.             </a>
  115.         </div>
  116.  
  117.     </div>
  118. </div>
  119.  
  120. <div class="pg-body">
  121.         {# 左侧栏  #}
  122.         <div class="left-menu">
  123.             {% block side_bar %}
  124.                 {#   自定义标签 #}
  125.                 {% load rbac %}
  126.                 {% get_menu_list request %}
  127.              {% endblock side_bar %}
  128.         </div>
  129.     {#  右侧栏数据体 #}
  130.     <div class="right-body">
  131.          {% block content %}
  132.  
  133.          {% endblock content %}
  134.     </div>
  135. </div>
  136.  
  137. {% block js %}
  138.  
  139.  {% endblock %}
  140. </body>
  141. </html>

　　让页面继承了相应的盒子之后,我么就会得到如下样式

　　

　　那怎么把我们的多级菜单权限展现在右边呢?

　　这里需要要到一个新的语法(关于自定义模板标签)

　　建立如下文件夹

　　

　　rbac.py

  1. from django import template
  2. from ..models import Permission
  3. register = template.Library()
  4.  
  5. @register.inclusion_tag("rbac/menu.html")
  6. def get_menu(request):
  7.     print("OK...")
  8.     permission_list = request.session.get("permission_list")  #获取权限列表
  9.     menu_list = []
  10.     for per in permission_list:
  11.         if per.get("type") == "menu": #如果是菜单列表加入列表,返回列表和menu.html渲染
  12.             menu_list.append(per)
  13.     return {"default_data": default_data}

　　menu.html

  1.   <div id="treeview" class="small">
  2.  
  3.   </div>
  4.  
  5. <script src="/static/bootstrap-treeview/js/bootstrap-treeview.js"></script>
  6. <script type="text/javascript">
  7.     // API文档参数列表: https://www.cnblogs.com/tangzeqi/p/8021637.html
  8.  
  9.               $(function() {
  10.  
  11.                   var options = {
  12.                         data:{{ default_data|safe }} , //data属性是必须的，是一个对象数组    Array of Objects.
  13.                         color: "", //所有节点使用的默认前景色，这个颜色会被节点数据上的backColor属性覆盖.        String
  14.                         backColor: "#000000", //所有节点使用的默认背景色，这个颜色会被节点数据上的backColor属性覆盖.     String
  15.                         borderColor: "#000000", //边框颜色。如果不想要可见的边框，则可以设置showBorder为false。        String
  16.                         nodeIcon: "glyphicon glyphicon-stop", //所有节点的默认图标
  17.                         checkedIcon: "glyphicon glyphicon-check", //节点被选中时显示的图标         String
  18.                         collapseIcon: "glyphicon glyphicon-minus", //节点被折叠时显示的图标        String
  19.                         expandIcon: "glyphicon glyphicon-plus", //节点展开时显示的图标        String
  20.                         emptyIcon: "glyphicon", //当节点没有子节点的时候显示的图标              String
  21.                         enableLinks: false, //是否将节点文本呈现为超链接。前提是在每个节点基础上，必须在数据结构中提供href值。        Boolean
  22.                         highlightSearchResults: true, //是否高亮显示被选中的节点        Boolean
  23.                         levels: 2, //设置整棵树的层级数  Integer
  24.                         multiSelect: false, //是否可以同时选择多个节点      Boolean
  25.                         onhoverColor: "#F5F5F5", //光标停在节点上激活的默认背景色      String
  26.                         selectedIcon: "glyphicon glyphicon-stop", //节点被选中时显示的图标     String
  27.  
  28.                         searchResultBackColor: "", //当节点被选中时的背景色
  29.                         searchResultColor: "", //当节点被选中时的前景色
  30.  
  31.                         selectedBackColor: "", //当节点被选中时的背景色
  32.                         selectedColor: "#FFFFFF", //当节点被选中时的前景色
  33.  
  34.                         showBorder: true, //是否在节点周围显示边框
  35.                         showCheckbox: false, //是否在节点上显示复选框
  36.                         showIcon: true, //是否显示节点图标
  37.                         showTags: false, //是否显示每个节点右侧的标记。前提是这个标记必须在每个节点基础上提供数据结构中的值。
  38.                         uncheckedIcon: "glyphicon glyphicon-unchecked", //未选中的复选框时显示的图标，可以与showCheckbox一起使用
  39.                     };
  40.  
  41.                     $('#treeview').treeview({
  42.  
  43.                           color: "#4F4F4F",
  44.                           expandIcon: 'glyphicon glyphicon-chevron-right',
  45.                           collapseIcon: 'glyphicon glyphicon-chevron-down',
  46.                           nodeIcon: 'glyphicon glyphicon-bookmark',
  47.                           enableLinks: true,
  48.                           levels: 1,
  49.                           showIcon:false,
  50.                           selectedBackColor: "",
  51.                           selectedColor: "#333",
  52.                           data: {{ default_data|safe }},
  53.                     });
  54.  
  55.                     $('#treeview').on('nodeSelected',function(event, data) {
  56.                         console.log(data);
  57.                     })
  58.  
  59.           });
  60. </script>

　　然后在base里面调用这个自定义标签

　　

  1.         {# 左侧栏  #}
  2.         <div class="left-menu">
  3.             {% block side_bar %}
  4.                    自定义标签
  5.                 {% load rbac %}
  6.                 {% get_menu_list request %}
  7.              {% endblock side_bar %}
  8.         </div>

　　整个流程:

那如何把数据动态的添加到侧边栏呢?我们需要修改代码

　rbac.py

  1. @register.inclusion_tag("rbac/menu.html")
  2. def get_menu_list(request):
  3.     permission_list = request.session.get('permission_list')
  4.     permission_dic = {}
  5.     for per_dic in permission_list:
  6.         if per_dic['type'] == 'button':
  7.             continue  # 过滤掉button权限,我们只要菜单权限
  8.         new_per_dic = {}  # 对菜单权限的数据按照treeview的数据结构构建新的字典
  9.         new_per_dic['text'] = per_dic['title']
  10.         new_per_dic['href'] = per_dic['url']
  11.         new_per_dic['nodes'] = []
  12.         new_per_dic['parent_id'] = per_dic['parent_id']
  13.  
  14.         permission_dic[per_dic.get('id')] = new_per_dic  # 以自己的权限主键为键,以新构建的字典为值,构造新的字典
  15.  
  16.     print('========', permission_dic)
  17.  
  18.     permission_tree_list = []  # 整个数据大列表
  19.     for per_id, per_dic in permission_dic.items():
  20.         pid = per_dic.get('parent_id')  # 取每一个字典中的父id
  21.         if not pid:  # 没有父id(最高权限),就直接加入数据大列表
  22.             permission_tree_list.append(per_dic)
  23.         else:  # 有父id就加入父id队对应的那个的node(一个列表)
  24.             permission_dic[pid]['nodes'].append(per_dic)
  25.  
  26.         # 展开节点
  27.         current_path = request.path
  28.         if current_path == per_dic.get('href'):
  29.             pid = per_dic.get('parent_id')
  30.             per_dic['emptyIcon']=''
  31.             while pid:
  32.                 permission_dic[pid]['state'] = {'expanded': True}
  33.                 pid = permission_dic[pid]['parent_id']
  34.  
  35.     return {'permission_tree_list': json.dumps(permission_tree_list)} #前端不需要反序列化,bootstrap treeview会帮你做

　　

我们会得到如下页面:

　　

django权限二(多级菜单的设计以及展示)的更多相关文章

  1. django权限之二级菜单

    遗漏知识点 1.构建表结构时,谁被关联谁就是主表,在层级删除的时候,删除子表的时候,主表不会被删除,反之删除主表的话,字表也会被删除, 使用related_name=None   反向查询,起名用的 ...

  2. django 权限设置 左侧菜单点击显示，面包屑

    1.左侧菜单点击显示 就是在点击的时候保留点击的功能 方法. 1.加入新的字段,pid来判断 class Permission(models.Model): """ 权限 ...

  3. python 全栈开发，Day111(客户管理之 编辑权限(二),Django表单集合Formset,ORM之limit_choices_to,构造家族结构)

    昨日内容回顾 1. 权限系统的流程? 2. 权限的表有几个? 3. 技术点 中间件 session orm - 去重 - 去空 inclusion_tag filter 有序字典 settings配置 ...

  4. Django - 权限（5）- 非菜单权限对应的一级菜单展开、面包屑导航

    一.非菜单权限对应的一级菜单展开 需求:客户列表和账单列表页面中都有添加按钮,当点击添加客户(或编辑客户.删除客户)时,客户列表所属的一级菜单展开,当点击添加账单(或编辑账单.删除账单)时,账单列表所 ...

  5. django自定义rbac权限组件(二级菜单)

    一.目录结构 二.表结构设计 model.py from django.db import models # Create your models here. class Menu(models.Mo ...

  6. day1作业二：多级菜单操作

    作业二:多级菜单 (1)三级菜单 (2)可以次选择进入各子菜单 (3)所需新知识点:列表.字典 要求:输入back返回上一层,输入quit退出整个程序 思路: (1)首先定义好三级菜单字典: (2)提 ...

  7. day1作业二：多级菜单操作（函数实现）

    作业二:多级菜单 (1)三级菜单 (2)可以次选择进入各子菜单 (3)所需新知识点:列表.字典 要求:输入back返回上一层,输入quit退出整个程序 本示例的三级菜单是一个yaml文件格式,格式如下 ...

  8. day1 作业二：多级菜单操作

    作业二:多级菜单 (1)三级菜单 (2)可以次选择进入各子菜单 (3)所需新知识点:列表.字典 要求:输入b返回上一层,输入q退出整个程序 思路:三级菜单第一级别是省,第二级别是市,第三级别是县,用户 ...

  9. day1作业二：多级菜单

        作业二:多级菜单 1.三级菜单 2.可以次选择进入各子菜单 3.所需新知识点:列表.字典 4.打印b回到上一层 5.打印q退出循环 流程图如下: readme: (1)存储三级菜单的字典;设置 ...

随机推荐

  1. ubuntu16部署gitlab

    一.gitlab的安装 1. 安装依赖包 $ sudo apt-get update #如无ssh还需安装openssh-server $ sudo apt-get install postfix c ...

  2. Tensorflow梯度下降应用

    import tensorflow as tfimport numpy as np #使用numpy生成随机点x_data = np.random.rand(100)y_data = x_data*0 ...

  3. IFC—IfcProduct实体继承框架

  4. Ubuntu，kubuntu与xubuntu的差别 Ubuntu各版本主要差异

    Ubuntu各版本主要差异 Ubuntu官方考虑到使用者的不同需求,提供各种不同的发行版.虽然发布了几种版本的Ubuntu系统,但是它们的核心系统是一模一样的.可以这么说不同发行版的Ubuntu的区别 ...

  5. vray学习笔记（4）混合材质是个什么东西

    看下定义: The Blend material lets you mix two materials on a single side of the surface. Blend material材 ...

  6. bzoj1735 [Usaco2005 jan]Muddy Fields 泥泞的牧场

    传送门 分析 我们知道对于没有障碍的情况就是将横轴点于纵轴点连边 于是对于这种有障碍的情况我们还是分横轴纵轴考虑 只不过对于有障碍的一整条分为若干个无障碍小段来处理 然后将标号小段连边,跑最大匹配即可 ...

  7. ZROI2018普转提day6t3

    传送门 分析 居然卡哈希数,万恶的出题人...... 感觉我这个方法似乎比较呆,我的代码成功成为了全网最慢的代码qwq 应该是可以直接哈希的 但由于我哈希学的不好又想练练线段树维护哈希,于是就写了个线 ...

  8. Spark的广播变量模块

    有人问我,如果让我设计广播变量该怎么设计,我想了想说,为啥不用zookeeper呢? 对啊,为啥不用zookeeper,也许spark的最初设计哲学就是尽量不使用别的组件,他有自己分布式内存文件系统, ...

  9. C#中 ACCESS数据库常用操作语句...容易出错的地方(DateTime类型)

    这次在C#编程过程中,第一次用到了ACCESS数据库,重点涉及到时间类型,整数类型.是否类型....;遇到了许多困难,就把这些整理了下来,与大家分享. 一.Insert语句的基本格式: INSERT ...

  10. DiscreteFrechetDist

    计算离散的frechet 距离,通过计算两条曲线之间的点的距离,将两条曲线上的点按照距离以及曲线的趋势进行配对,最后根据这些配对的距离选出最后的离散frechet距离(compute discrete ...