當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發(fā)布時(shí)間：2023/11/30 编程问答 34 豆豆

生活随笔收集整理的這篇文章主要介紹了 django权限二(多级菜单的设计以及展示) 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

多級(jí)權(quán)限菜單設(shè)計(jì)級(jí)標(biāo)題欄

　　我們現(xiàn)在只有數(shù)據(jù)展示,要進(jìn)入其他url還需要手動(dòng)的輸入路徑,非常的麻煩,所以我們要設(shè)計(jì)

一個(gè)導(dǎo)航欄以及側(cè)邊多級(jí)菜單欄,這個(gè)展示是通過stark組件的設(shè)計(jì)的增刪改查頁面,而每一個(gè)

頁面我們都需要有導(dǎo)航欄和側(cè)邊的權(quán)限菜單欄,所以把這個(gè)公共的部分提起到一個(gè)網(wǎng)頁,讓增刪改

繼承這個(gè)頁面就可以了.

　　base.html(這要是自己的樣式以及設(shè)計(jì)盒子讓其他網(wǎng)頁進(jìn)行繼承)

{% 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">資產(chǎn)管理</a><a class="menu-item">用戶信息</a><a class="menu-item">權(quán)限管理</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"><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}}個(gè)人信息</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">任務(wù)<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">{# 左側(cè)欄 #}<div class="left-menu">{% block side_bar %}{# 自定義標(biāo)簽 #}{% load rbac %}{% get_menu_list request %}{% endblock side_bar %}</div>{# 右側(cè)欄數(shù)據(jù)體 #}<div class="right-body">{% block content %}{% endblock content %}</div> </div>{% block js %}{% endblock %} </body> </html>

　　讓頁面繼承了相應(yīng)的盒子之后,我么就會(huì)得到如下樣式

　　那怎么把我們的多級(jí)菜單權(quán)限展現(xiàn)在右邊呢?

　　這里需要要到一個(gè)新的語法(關(guān)于自定義模板標(biāo)簽)

　　建立如下文件夾

　　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") #獲取權(quán)限列表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文檔參數(shù)列表: https://www.cnblogs.com/tangzeqi/p/8021637.html$(function() {var options = {data:{{ default_data|safe }} , //data屬性是必須的，是一個(gè)對(duì)象數(shù)組 Array of Objects.color: "", //所有節(jié)點(diǎn)使用的默認(rèn)前景色，這個(gè)顏色會(huì)被節(jié)點(diǎn)數(shù)據(jù)上的backColor屬性覆蓋. StringbackColor: "#000000", //所有節(jié)點(diǎn)使用的默認(rèn)背景色，這個(gè)顏色會(huì)被節(jié)點(diǎn)數(shù)據(jù)上的backColor屬性覆蓋. StringborderColor: "#000000", //邊框顏色。如果不想要可見的邊框，則可以設(shè)置showBorder為false。 StringnodeIcon: "glyphicon glyphicon-stop", //所有節(jié)點(diǎn)的默認(rèn)圖標(biāo)checkedIcon: "glyphicon glyphicon-check", //節(jié)點(diǎn)被選中時(shí)顯示的圖標(biāo) StringcollapseIcon: "glyphicon glyphicon-minus", //節(jié)點(diǎn)被折疊時(shí)顯示的圖標(biāo) StringexpandIcon: "glyphicon glyphicon-plus", //節(jié)點(diǎn)展開時(shí)顯示的圖標(biāo) StringemptyIcon: "glyphicon", //當(dāng)節(jié)點(diǎn)沒有子節(jié)點(diǎn)的時(shí)候顯示的圖標(biāo) StringenableLinks: false, //是否將節(jié)點(diǎn)文本呈現(xiàn)為超鏈接。前提是在每個(gè)節(jié)點(diǎn)基礎(chǔ)上，必須在數(shù)據(jù)結(jié)構(gòu)中提供href值。 BooleanhighlightSearchResults: true, //是否高亮顯示被選中的節(jié)點(diǎn) Booleanlevels: 2, //設(shè)置整棵樹的層級(jí)數(shù) IntegermultiSelect: false, //是否可以同時(shí)選擇多個(gè)節(jié)點(diǎn) BooleanonhoverColor: "#F5F5F5", //光標(biāo)停在節(jié)點(diǎn)上激活的默認(rèn)背景色 StringselectedIcon: "glyphicon glyphicon-stop", //節(jié)點(diǎn)被選中時(shí)顯示的圖標(biāo) StringsearchResultBackColor: "", //當(dāng)節(jié)點(diǎn)被選中時(shí)的背景色searchResultColor: "", //當(dāng)節(jié)點(diǎn)被選中時(shí)的前景色selectedBackColor: "", //當(dāng)節(jié)點(diǎn)被選中時(shí)的背景色selectedColor: "#FFFFFF", //當(dāng)節(jié)點(diǎn)被選中時(shí)的前景色showBorder: true, //是否在節(jié)點(diǎn)周圍顯示邊框showCheckbox: false, //是否在節(jié)點(diǎn)上顯示復(fù)選框showIcon: true, //是否顯示節(jié)點(diǎn)圖標(biāo)showTags: false, //是否顯示每個(gè)節(jié)點(diǎn)右側(cè)的標(biāo)記。前提是這個(gè)標(biāo)記必須在每個(gè)節(jié)點(diǎn)基礎(chǔ)上提供數(shù)據(jù)結(jié)構(gòu)中的值。uncheckedIcon: "glyphicon glyphicon-unchecked", //未選中的復(fù)選框時(shí)顯示的圖標(biāo)，可以與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里面調(diào)用這個(gè)自定義標(biāo)簽

{# 左側(cè)欄 #}<div class="left-menu">{% block side_bar %}自定義標(biāo)簽{% load rbac %}{% get_menu_list request %}{% endblock side_bar %}</div>

　　整個(gè)流程:

那如何把數(shù)據(jù)動(dòng)態(tài)的添加到側(cè)邊欄呢?我們需要修改代碼

　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權(quán)限,我們只要菜單權(quán)限new_per_dic = {} # 對(duì)菜單權(quán)限的數(shù)據(jù)按照treeview的數(shù)據(jù)結(jié)構(gòu)構(gòu)建新的字典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 # 以自己的權(quán)限主鍵為鍵,以新構(gòu)建的字典為值,構(gòu)造新的字典print('========', permission_dic)permission_tree_list = [] # 整個(gè)數(shù)據(jù)大列表for per_id, per_dic in permission_dic.items():pid = per_dic.get('parent_id') # 取每一個(gè)字典中的父idif not pid: # 沒有父id(最高權(quán)限),就直接加入數(shù)據(jù)大列表 permission_tree_list.append(per_dic)else: # 有父id就加入父id隊(duì)對(duì)應(yīng)的那個(gè)的node(一個(gè)列表)permission_dic[pid]['nodes'].append(per_dic)# 展開節(jié)點(diǎn)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會(huì)幫你做

我們會(huì)得到如下頁面:

轉(zhuǎn)載于:https://www.cnblogs.com/tjp40922/p/10311183.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的django权限二(多级菜单的设计以及展示)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。