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

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

  我们现在只有数据展示,要进入其他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="50" height="50" 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属性覆盖.        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 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')  # 取每一个字典中的父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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/387547.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

腾讯手游如何提早揭露游戏外挂风险?

目前腾讯SR手游安全测试限期开放免费专家预约&#xff01;点击链接&#xff1a;手游安全测试立即预约&#xff01; 作者&#xff1a;sheldon&#xff0c;腾讯高级安全工程师 商业转载请联系腾讯WeTest获得授权&#xff0c;非商业转载请注明出处。 文中动图无法显示&#xff0c…

下面介绍一个开源的OCR引擎Tesseract2。值得庆幸的是虽然是开源的但是它的识别率较高,并不比其他引擎差劲。网上介绍Tessnet2也是当时时间排名第三的识别引擎,只是后来慢慢不维护了,目前是G

下面介绍一个开源的OCR引擎Tesseract2。值得庆幸的是虽然是开源的但是它的识别率较高&#xff0c;并不比其他引擎差劲。网上介绍Tessnet2也是当时时间排名第三的识别引擎&#xff0c;只是后来慢慢不维护了&#xff0c;目前是Google在维护&#xff0c;大家都知道Google 在搞电子…

分UV教程

第一步 首先&#xff0c;打开一个练习场景“空中预警机1.max”&#xff08;这事小弟平时的练习做的不好献丑了&#xff09;。&#xff08;图01&#xff09; 图01 第二步 这里我们拿机翼来举例子&#xff0c;隐藏除机翼意外的其他模型。&#xff08;图02&#xff09; 图02 第三步…

k8s系列--- dashboard认证及分级授权

http://blog.itpub.net/28916011/viewspace-2215214/ 因版本不一样&#xff0c;略有改动 Dashboard官方地址&#xff1a; https://github.com/kubernetes/dashboard dashbord是作为一个pod来运行&#xff0c;需要serviceaccount账号来登录。 先给dashboad创建一个专用的认证信息…

JAVA项目开发

16年java软件开发经验&#xff0c;全职项目开发&#xff0c;项目可签合同、开普票和专票。 主要承接项目&#xff1a; 1、网站开发项目 自主开发千帆CMS动态发布系统&#xff0c;基于java/springboot2/jpa/easyui开发&#xff0c;简单易用&#xff0c;后台与前端分离&#xff0…

unity3d 任务头上的血条

人物的名称与血条的绘制方法很简单&#xff0c;但是我们需要解决的问题是如何在3D世界中寻找合适的坐标。因为3D世界中的人物是会移动的&#xff0c;它是在3D世界中移动&#xff0c;并不是在2D平面中移动&#xff0c;但是我们需要将3D的人物坐标换算成2D平面中的坐标&#xff0…

unity3d 预制体

首先要说明一下什么是预制体&#xff1f; 在Unity3D里面我们叫它Prefab&#xff1b;我们也可以这样理解&#xff1a;当制作好了游戏组件&#xff08;场景中的任意一个gameobject &#xff09;,我们希望将它制作成一个组件模版&#xff0c;用于批量的套用工作&#xff0c;例如说…

Python小数据池,代码块

今日内容一些小的干货 一. id is 二. 代码块三. 小数据池四. 总结python小数据池&#xff0c;代码块的最详细、深入剖析 一. id is 二. 代码块三. 小数据池四. 总结一&#xff0c;id&#xff0c;is&#xff0c; 在Python中&#xff0c;id是什么&#xff1f;id是内存地址…

【Wax】使用Wax (framework方式,XCode 4.6)

前情提示&#xff1a;【Wax】使用Wax &#xff08;非framework方式&#xff0c;XCode 4.6&#xff09; 这次&#xff0c;将以framework的方式来使用Wax 那么&#xff0c;让我们开始吧&#xff01;&#xff01;&#xff01; 准备工作&#xff1a; 下载wax.framework&#xff1a;…

unity3d 简单动画

1&#xff0c;动画系统配置 创建游戏对象并添加Animation组件&#xff0c;然后将动画文件拖入组件。 进入动画文件的Debug属性面板 选中Legacy属性 选中游戏对象&#xff0c;打开Animation编辑窗口 添加动画变化属性 需改关键帧的属性值 配置完成后运行即可得到动画效果 2&…

3dmax导出到unity3d下分割动画

1、在3dmax 导出时候&#xff0c;要导出FBX文件&#xff0c;同时包含动画&#xff0c;骨骼&#xff0c;皮肤等内容 2、把FBX文件导入到Unity3d后会默认有一个超长的大动画&#xff0c;就是一个整体的动画&#xff0c;如图Take001&#xff0c;这个时候要分割哪部分是跑&#xf…

Unity3d之AssetBundle打包与读取

一、创建Assetbundle 在unity3d开发的游戏中&#xff0c;无论模型&#xff0c;音频&#xff0c;还是图片等&#xff0c;我们都做成Prefab&#xff0c;然后打包成Assetbundle&#xff0c;方便我们后面的使用&#xff0c;来达到资源的更新。 一个Assetbundle可以打包一个模型&…

unity3d 各个目录的意思

1.首先&#xff0c;你得理解Unity中各个目录的意思&#xff1f; 我这里说的是移动平台&#xff08;安卓举例&#xff09;&#xff0c;读&#xff0c;写。所谓读&#xff0c;就是你出大版本的包之后&#xff0c;这个只读的话&#xff0c;就一辈子就这些东西了&#xff0c;不会改…

asp.net core根据用户权限控制页面元素的显示

asp.net core根据用户权限控制页面元素的显示 Intro 在 web 应用中我们经常需要根据用户的不同允许用户访问不同的资源&#xff0c;显示不同的内容&#xff0c;之前做了一个 AccessControlHelper 的项目&#xff0c;就是解决这个问题的。 asp.net core 支持 TagHelper 和 基于 …

Java面向对象(二)

source:http://blog.java1234.com/index.html?typeId1 Java类的继承 1&#xff0c;继承定义以及基本使用 定义&#xff1a;子类能够继承父类的属性和方法&#xff1b; 注意点&#xff1a;Java中只支持单继承&#xff1b; 私有方法不能继承&#xff1b; 2&#xff0c;方法重写 …

游戏通讯方式

农药自从上线以来&#xff0c;依靠着强大的产品力以及腾讯的运营能力&#xff0c;在游戏市场上表现可谓是风生水起&#xff0c;根据第三方的调研数据显示&#xff0c;《王者荣耀》渗透率达到22.3%&#xff0c;用户规模达到2.01亿人&#xff0c;每日的日活跃用户&#xff08;DAU…

小小c#算法题 - 3 - 字符串语句反转

题目&#xff1a;反转语句。 如I love Beijing! 反转后输出 !Beijing love I 特点是指反转单词的顺序&#xff0c;其他字符&#xff08;这个可以自己指定&#xff09;不反转。且不能用内置函数&#xff0c;如Split和Substring。 分析&#xff1a;我们需要保证一个单词的字…

unity5.4.3p2里面的AssetBundle打包流程

unity5.4.3p2里面的AssetBundle打包流程&#xff0c;相比之前unity4.x的打包简单了许多&#xff0c;Unity4.X中打包的时候需要自己去管理依赖关系&#xff0c;各种BuildPipeline.PushAssetDependencies()和BuildPipeline.PopAssetDependencies()&#xff0c;一不小心手一抖&…

主成分分析(PCA)原理详解 2016/12/17 · IT技术 · 主成分分析, 数学 分享到: 21 原文出处: 中科春哥 一、PCA简介 1. 相关背景 主成分分析(Principa

主成分分析&#xff08;PCA&#xff09;原理详解 2016/12/17 IT技术 主成分分析, 数学 分享到&#xff1a;21原文出处&#xff1a; 中科春哥 一、PCA简介 1. 相关背景 主成分分析&#xff08;Principal Component Analysis&#xff0c;PCA&#xff09;&#xff0c; 是一种统…

【Tensorflow】 Object_detection之训练PASCAL VOC数据集

参考&#xff1a;Running Locally 1、检查数据、config文件是否配置好 可参考之前博客&#xff1a; Tensorflow Object_detection之配置Training Pipeline Tensorflow Object_detection之准备数据生成TFRecord 2、训练模型 PIPELINE_CONFIG_PATH/data/zxx/models/research/date…