雙層菜單

一. Django數據庫使用順序

 

若是在settingsDATABASES中爲某一app配置的數據庫,則該app使用這個數據庫,若是app沒有配置專門的數據庫,則使用default中配置的數據庫css

二. orm,爲關聯表的主表查詢字表時起別名:related_name

 

三. 主表與子表的級聯刪除

1.主表與字表html

 

  1. 級聯刪除

 

刪除主表中某條記錄,子表中的關聯內容也會刪除,刪除子表中木條記錄,主表中的關聯內容不會被刪除前端

.db_constraint屬性

該屬性能夠實現不創建約束關係,但能應用創建約束所使用的查詢接口web

用於某些項目中的數據實際上具備一對多或多對多或一對一的關係,可是並不可以創建約束,此時若是不適用該屬性,沒法應用orm提供的查詢接口,操做起來很是麻煩.數據庫

.建立二級菜單json

  實現效果:瀏覽器

    信息管理session

      客戶列表app

    財務管理ide

      繳費列表

  1. 表結構更改(背景灰色爲新增部分):
 1 class Menu(models.Model):
 2     title = models.CharField(max_length=32, verbose_name='菜單')
 3     icon = models.CharField(max_length=32, verbose_name='圖標', null=True, blank=True)
 4 
 5 class Permission(models.Model):
 6     title = models.CharField(max_length=32, verbose_name='標題')
 7     url = models.CharField(max_length=32, verbose_name='權限')
 8     menu=models.ForeignKey("Menu",on_delete=models.CASCADE,null=True)
 9  
10     class Meta:
11         verbose_name_plural = '權限表'
12         verbose_name = '權限表'
13     
14     def __str__(self):
15         return self.title
  1. 注入二級菜單全部信息

 

3.注入信息

 1 from rbac.models import Role
 2 def initial_sesson(user,request):
 3     """
 4     功能:將當前登陸人的全部權限錄入session中
 5     :param user: 當前登陸人
 6     """
 7     # 查詢當前登陸人的全部權限列表
 8     # 查看當前登陸人的全部角色
 9     # ret=Role.objects.filter(user=user)
10     permissions = Role.objects.filter(user=user).values("permissions__url",
11                                              "permissions__title",
12                                              "permissions__menu__title",
13                                              "permissions__menu__icon",                                                                                                                                               " permissions__menu__pk").distinct()
14     permission_list = []  
15     permission_menu_dict ={}
16     for item in permissions:
17         # 構建權限列表
18         permission_list.append(item["permissions__url"])
19         # 菜單權限
20         menu_pk=item["permissions__menu__pk"]
21         if menu_pk:
22             if menu_pk not in permission_menu_dict:
23                 permission_menu_dict[menu_pk]={
24                      "menu_title":item["permissions__menu__title"],
25                      "menu_icon":item["permissions__menu__icon"],
26                      "children":[
27                          {
28                              "title":item["permissions__title"],
29                              "url":item["permissions__url"],
30                          }
31                      ],
32 
33                 }
34             else:
35                 permission_menu_dict[menu_pk]["children"].append({
36                     "title": item["permissions__title"],
37                     "url": item["permissions__url"],
38                 })
39     print("permission_menu_dict",permission_menu_dict)
40     # 將當前登陸人的權限列表注入session中
41     request.session["permission_list"] = permission_list
42     # 將當前登陸人的菜單權限字典注入session中
43     request.session["permission_menu_dict"] = permission_menu_dict

3.1信息格式:(bejson在線轉換格式工具)

元數據:

[  {
        'permissions__url': '/customer/list/',
        'permissions__title': '客戶列表',
        'permissions__menu__title': '信息管理',
        'permissions__menu__icon': 'fa fa-connectdevelop',
        'permissions__menu__pk': 1
    },  
    
    {
        'permissions__url': '/mycustomer/',
        'permissions__title': '個人私戶',
        'permissions__menu__title': '信息管理',
        'permissions__menu__icon': 'fa fa-connectdevelop',
        'permissions__menu__pk': 1
    },  
    
    {
        'permissions__url': '/payment/list/',
        'permissions__title': '繳費列表',
        'permissions__menu__title': '財務管理',
        'permissions__menu__icon': 'fa fa-code-fork',
        'permissions__menu__pk': 2
    }, ]

目標數據:

{
   1:{
        "title":"信息管理",
        "icon":"",
        "children":[
            {
              "title":"客戶列表",
              "url":"",
            }
        ]
        
      },
      
   2:{
        "title":"財務管理",
        "icon":"",
        "children":[
            {
              "title":"繳費列表",
              "url":"",
            },
        ]
        
      }, 
  

}

 

4.注入以後要清瀏覽器的session

5.獲取信息,渲染到頁面上

在過濾器中:

1 @register.inclusion_tag("rbac/menu.html")
2 def get_menu_styles(request):
3     permission_menu_dict = request.session.get("permission_menu_dict")
4     print("permission_menu_dict",permission_menu_dict)
5     return {"permission_menu_dict":permission_menu_dict}

menu.HTML

 1 <div class="multi-menu">
 2     {% for item in permission_menu_dict.values %}
 3        <div class="item">
 4         <div class="title"><i class="{{ item.menu_icon }}"></i>{{ item.menu_title }}</div>
 5         <div class="body">
 6               {% for foo in item.children %}
 7                   <a href="{{ foo.url }}">{{ foo.title }}</a>
 8               {% endfor %}
 9         </div>
10        </div>
11     {% endfor %}
12 </div>

前端調用:

1 <div class="menu-body">
2        {% load web %}
3        {% get_menu_styles request %}
4 </div>

得到樣式的css:

 1 .multi-menu .item > .body {
 2     border-bottom: 1px solid #dddddd;
 3 }
 4 
 5 .multi-menu .item > .body a {
 6     display: block;
 7     padding: 5px 20px;
 8     text-decoration: none;
 9     border-left: 2px solid transparent;
10     font-size: 13px;
11 
12 }
13 
14 .multi-menu .item > .body a:hover {
15     border-left: 2px solid #2F72AB;
16 }
17 
18 .multi-menu .item > .body a.active {
19     border-left: 2px solid #2F72AB;
20 }

6.二級菜單隱藏效果,得到事件的js

1 $('.item .title').click(function () {
2     $(this).next().toggleClass('hide');
3     $(this).parent().siblings().children(".body").addClass("hide")
4 });
相關文章
相關標籤/搜索