在寫網頁的時候,我們經常需要用到二級菜單,如下圖:
“文章分類”作爲第一級,隨後跟着是該類下的二級鏈接。結合css樣式及js還可以實現手風琴摺疊的效果。
操作
假設讀者的知識基礎
1、初學HTML
2、初識Django的模板(Template)及模型(models)
首先我們通過models.py爲菜單鏈接建立數據庫。
from __future__ import unicode_literals
from django.contrib import admin
from django.db import models
from django.contrib.auth.models import Group
class left(models.Model):
link_id=models.AutoField(primary_key=True,unique=True)
label=models.CharField(max_length=10,default="link")
link=models.CharField(max_length=200,default="")
pic=models.ImageField(upload_to="static/images/",blank=True)
authlevel=models.ManyToManyField(Group,blank=True) #權限信息,根據權限顯示菜單內容
parent_id=models.ForeignKey('self',blank=True,null=True,verbose_name=u"父菜單") #外聯鍵鏈接的是自己
CHOICES=(("P",u"父菜單"),("S",u"子菜單"))
menulevel=models.CharField(max_length=2,verbose_name=u"菜單級別",choices=CHOICES)
def __unicode__(self):
return self.label #在admin界面顯示label
隨後在admin.py註冊left類。
from models import left
admin.site.register([left])
在admin的頁面裏輸入幾個關聯頁面,我這裏輸入的則是
用戶管理
人力資源->考覈
工藝管理
訂單信息
在寫模板時,我先寫第一級菜單的循環,通過判斷其級別(“menulevel”)是否爲父親(“P”),決定渲染其第一級菜單。在渲染第二級菜單時,就需要用到一個神奇的標識符(“_set.all”),它可以實現在第一級節點下對子節點遍歷。
<ul>
{% for item in menus %}
{% if item.menulevel == "P" %}
<div id="link">
<li>
<a href="{{item.link}}">{{item.label}}</a>
</li>
{% endif %}
{% for sub_item in item.left_set.all %}
<div id="sub_link">
<li>
<a href="{{sub_item.link}}">{{sub_item.label}}</a>
</li>
</div>
{% endfor %}
</div>
{% endfor %}
</ul>
效果
爲了區別,我在css樣式裏對sub_menu 設定了#sub_menu{font-size:14px}
參考資料
lanlandechong的專欄 django模板之循環嵌套
http://blog.csdn.net/lanlandechong/article/details/7690396