Django模板(Template)中的循環(for)嵌套

在寫網頁的時候,我們經常需要用到二級菜單,如下圖:
這裏寫圖片描述
“文章分類”作爲第一級,隨後跟着是該類下的二級鏈接。結合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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章