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

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

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

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

继承这个页面就可以了.

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

{% load staticfiles %}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CRM</title>

    <link rel="shortcut icon" href="/static /imgs/luffy-study-logo.png">

    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css"/>

    <link rel="stylesheet" href="/static/font-awesome/css/font-awesome.css"/>

    <link rel="stylesheet" href="/static/css/commons.css"/>

    <link rel="stylesheet" href="/static/css/nav.css"/>

    <script src="/static/js/jquery-3.3.1.min.js"></script>

    <style>

        .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>

<body>

<div class="pg-header">

    <div class="nav">

        <div class="logo-area left">

            <a href="#">

                <img class="logo" src="{% static 'imgs/logo.svg' %}">

                <span style="font-size: 18px;">CRM </span>

            </a>

        </div>

        <div class="left-menu left">

            <a class="menu-item">资产管理</a>

            <a class="menu-item">用户信息</a>

            <a class="menu-item">权限管理</a>

            <div class="menu-item">

                <span>使用说明</span>

                <i class="fa fa-caret-down" aria-hidden="true"></i>

                <div class="more-info">

                    <a href="#" class="more-item">666</a>

                    <a href="#" class="more-item">888</a>

                </div>

            </div>

        </div>

        <div class="right-menu right clearfix">

            <!-- Single button -->

            <div class="btn-group user-info right">

              <img class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" width="" height="" class="img-circle" src="{% static 'imgs/default.jpg' %}">

              <ul class="dropdown-menu small">

                <li><a href="#" class="more-item">{{request.user.name}}个人信息</a></li>

                <li><a href="/logout/" class="more-item">注销</a></li>

                <li><a href="/home/">修改密码</a></li>

                <li><a href="/home/">更换头像</a></li>

              </ul>

            </div>

            <a class="user-menu right">

                <i class="fa fa-user" aria-hidden="true"></i>

                <span>{{ request.user }}</span>

            </a>

            <a class="user-menu right">

                消息

                <i class="fa fa-commenting-o" aria-hidden="true"></i>

                <span class="badge bg-success">2</span>

            </a>

            <a class="user-menu right">

                通知

                <i class="fa fa-envelope-o" aria-hidden="true"></i>

                <span class="badge bg-success">2</span>

            </a>

            <a class="user-menu right">

                任务

                <i class="fa fa-bell-o" aria-hidden="true"></i>

                <span class="badge bg-danger">4</span>

            </a>

        </div>

    </div>

</div>

<div class="pg-body">

        {# 左侧栏  #}

        <div class="left-menu">

            {% block side_bar %}

                {#   自定义标签 #}

                {% load rbac %}

                {% get_menu_list request %}

             {% endblock side_bar %}

        </div>

    {#  右侧栏数据体 #}

    <div class="right-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 id="treeview" class="small">

  </div>

<script src="/static/bootstrap-treeview/js/bootstrap-treeview.js"></script>

<script type="text/javascript">

    // API文档参数列表: https://www.cnblogs.com/tangzeqi/p/8021637.html

              $(function() {

                  var options = {

                        data:{{ default_data|safe }} , //data属性是必须的，是一个对象数组    Array of Objects.

                        color: "", //所有节点使用的默认前景色，这个颜色会被节点数据上的backColor属性覆盖.        String

                        backColor: "#000000", //所有节点使用的默认背景色，这个颜色会被节点数据上的backColor属性覆盖.     String

                        borderColor: "#000000", //边框颜色。如果不想要可见的边框，则可以设置showBorder为false。        String

                        nodeIcon: "glyphicon glyphicon-stop", //所有节点的默认图标

                        checkedIcon: "glyphicon glyphicon-check", //节点被选中时显示的图标         String

                        collapseIcon: "glyphicon glyphicon-minus", //节点被折叠时显示的图标        String

                        expandIcon: "glyphicon glyphicon-plus", //节点展开时显示的图标        String

                        emptyIcon: "glyphicon", //当节点没有子节点的时候显示的图标              String

                        enableLinks: false, //是否将节点文本呈现为超链接。前提是在每个节点基础上，必须在数据结构中提供href值。        Boolean

                        highlightSearchResults: true, //是否高亮显示被选中的节点        Boolean

                        levels: 2, //设置整棵树的层级数  Integer

                        multiSelect: false, //是否可以同时选择多个节点      Boolean

                        onhoverColor: "#F5F5F5", //光标停在节点上激活的默认背景色      String

                        selectedIcon: "glyphicon glyphicon-stop", //节点被选中时显示的图标     String

                        searchResultBackColor: "", //当节点被选中时的背景色

                        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 class="left-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')  # 取每一个字典中的父id

        if not pid:  # 没有父id(最高权限),就直接加入数据大列表

            permission_tree_list.append(per_dic)

        else:  # 有父id就加入父id队对应的那个的node(一个列表)

            permission_dic[pid]['nodes'].append(per_dic)

        # 展开节点

        current_path = request.path

        if 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会帮你做

我们会得到如下页面:

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

django权限之二级菜单
遗漏知识点 1.构建表结构时,谁被关联谁就是主表,在层级删除的时候,删除子表的时候,主表不会被删除,反之删除主表的话,字表也会被删除, 使用related_name=None 反向查询,起名用的 ...
django 权限设置左侧菜单点击显示，面包屑
1.左侧菜单点击显示就是在点击的时候保留点击的功能方法. 1.加入新的字段,pid来判断 class Permission(models.Model): """ 权限 ...
python 全栈开发，Day111(客户管理之编辑权限(二),Django表单集合Formset,ORM之limit_choices_to,构造家族结构)
昨日内容回顾 1. 权限系统的流程? 2. 权限的表有几个? 3. 技术点中间件 session orm - 去重 - 去空 inclusion_tag filter 有序字典 settings配置 ...
Django - 权限（5）- 非菜单权限对应的一级菜单展开、面包屑导航
一.非菜单权限对应的一级菜单展开需求:客户列表和账单列表页面中都有添加按钮,当点击添加客户(或编辑客户.删除客户)时,客户列表所属的一级菜单展开,当点击添加账单(或编辑账单.删除账单)时,账单列表所 ...
django自定义rbac权限组件(二级菜单)
一.目录结构二.表结构设计 model.py from django.db import models # Create your models here. class Menu(models.Mo ...
day1作业二：多级菜单操作
作业二:多级菜单 (1)三级菜单 (2)可以次选择进入各子菜单 (3)所需新知识点:列表.字典要求:输入back返回上一层,输入quit退出整个程序思路: (1)首先定义好三级菜单字典: (2)提 ...
day1作业二：多级菜单操作（函数实现）
作业二:多级菜单 (1)三级菜单 (2)可以次选择进入各子菜单 (3)所需新知识点:列表.字典要求:输入back返回上一层,输入quit退出整个程序本示例的三级菜单是一个yaml文件格式,格式如下 ...
day1 作业二：多级菜单操作
作业二:多级菜单 (1)三级菜单 (2)可以次选择进入各子菜单 (3)所需新知识点:列表.字典要求:输入b返回上一层,输入q退出整个程序思路:三级菜单第一级别是省,第二级别是市,第三级别是县,用户 ...
day1作业二：多级菜单
作业二:多级菜单 1.三级菜单 2.可以次选择进入各子菜单 3.所需新知识点:列表.字典 4.打印b回到上一层 5.打印q退出循环流程图如下: readme: (1)存储三级菜单的字典;设置 ...

随机推荐

Android WebView 捕捉点击的URL中的信息
项目要求,在WebView中点击搜索关键字,加载其他Web页面时,需要在一个文本输入框中,实时显示关键字事实上,这种点击,是WebView内的,并没有跳出这个WebView,Activity也没有经 ...
在JAVA中，String,Stringbuffer,StringBuilder 的区别
首先是,String,StringBuffer的区别两者的主要却别有两方面,第一是线程安全方面,第二是效率方面线程安全方面: String 不是线程安全的,这意味着在不同线程共享一个String ...
3-2 zk客户端连接关闭服务端，查看znode
使用ZooKeeper官方提供的Client来连接.路径类似的结构. 连接到我们的门户HOST. quota属于zookeeper.quota是子节点,zookeeper是父节点.quota其实是一个 ...
SpringBoot07 异常枚举、自定义异常、统一的全局异常处理
1 异常编号和提示信息统一管理利用枚举来实现异常的统一管理 package cn.xiangxu.springboottest.enums; import lombok.Getter; /** * ...
php学习笔记-php中的比较运算符
其中比较难懂的是==和=== ==是只比较两个变量的值,不仅仅是用于比较两个数是否相等,还可以比较int和string,不过会先转化string为int类型再比较,值相等则返回true,值不相等则返回 ...
GCD 学习(四) dispatch_group
如果想在dispatch_queue中所有的任务执行完成后在做某种操作,在串行队列中,可以把该操作放到最后一个任务执行完成后继续,但是在并行队列中怎么做呢.这就有dispatch_group 成组操作 ...
Entity Framework Tutorial Basics（8）：Types of Entity in Entity Framework
Types of Entity in Entity Framework: We created EDM for existing database in the previous section. A ...
arp绑定
Windows xp 在CMD中执行 arp -s ip mac 例如 arp -s 192.168.2.101 40-5f-c2-c1-97-fb Windwos 7 在 Windows 7/Vis ...
bit byte的关系
字 word 字节 byte 位 bit 字长是指字的长度 1字=2字节(1 word = 2 byte) 1字节=8位(1 byte = 8bit) 一个字的字长为2个字节=2*8=16 一个字节 ...
C# 与Java初始化顺序及异同（转）
C#初始化顺序类成员变量初始化先于类的构造函数静态成员变量先于实例变量子类成员变量先于父类成员变量(java相反) 父类构造函数先于子类构造函数参考实例: using System; //us ...

django权限二(多级菜单的设计以及展示)

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

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

随机推荐

热门专题