Django 自定義左側無限級下拉菜單

搭建django系統，總免不了自定義的功能模板，左側菜單的是很常用的，貼出以下代碼，供大家參考

plugin文件

# -*-coding:utf-8-*-

from django.template import loader
from django.template import RequestContext
from xadmin.views import BaseAdminPlugin
from django.db.models import Q
import json

class site_left_menu_plugin(BaseAdminPlugin):
    left_menu = False

    def init_request(self, *args, **kwargs):
        return bool(self.left_menu)

    # def block_search_cata_nav(self, context, nodes):
    #     nodes.append(loader.render_to_string('test.html',{ }))

    def block_left_navbar(self, context, nodes):
        menu_list = [{
            "parentCode":"01",
            "code": "011",
            "name": "返回首頁",
            "icon": "top",
            "to_url": "/",
            "selected": "",
            "flag": "",
            "children": [],
        },{
            "parentCode":"01",
            "code": "012",
            "name": "測試用",
            "icon": "top",
            "to_url": "",
            "selected": "",
            "flag": "",
            "children": [],
        },{
            "parentCode":"01",
            "code": "012",
            "name": "測試用",
            "icon": "top",
            "to_url": "",
            "selected": "",
            "flag": "",
            "children": [],
        },{
            "parentCode":"01",
            "code": "013",
            "name": "",
            "icon": "top",
            "to_url": "",
            "selected": "selected",
            "flag": "",
            "children": [],
        },{
            "parentCode":"01",
            "code": "014",
            "name": "",
            "icon": "top",
            "to_url": "",
            "selected": "selected",
            "flag": "",
            "children": [],
        },{
            "parentCode":"01",
            "code": "015",
            "name": "",
            "icon": "top",
            "to_url": "",
            "selected": "",
            "flag": "",
            "children": [{
                    "parentCode":"015",
                    "code": "0151",
                    "icon": "inner",
                    "name": "",
                    "to_url": "",
                    "selected": "",
                    "flag": "",
                    "children": []
                },
                {
                    "parentCode":"015",
                    "code": "0152",
                    "icon": "inner",
                    "name": "",
                    "to_url": "",
                    "selected": "",
                    "flag": "",
                    "children": [],
                },
                {
                    "parentCode": "015",
                    "code": "0153",
                    "icon": "inner",
                    "name": "",
                    "to_url": "",
                    "selected": "",
                    "flag": "",
                    "children": [],
                },{
                    "parentCode": "015",
                    "code": "0154",
                    "icon": "inner",
                    "name": "",
                    "to_url": "",
                    "selected": "",
                    "flag": "",
                    "children": [{
                        "parentCode": "0154",
                        "code": "01541",
                        "icon": "inner",
                        "name": "",
                        "to_url": "",
                        "selected": "",
                        "flag": "",
                        "children": [],
                    },],
                },{
                    "parentCode": "015",
                    "code": "0155",
                    "icon": "inner",
                    "name": "",
                    "to_url": "",
                    "selected": "",
                    "flag": "",
                    "children": [],
                }
            ]
        },]

        def recursion_list(tree_param, curren_url):
            index = 0
            for tp in tree_param:
                t_url = tp['to_url']
                if t_url in curren_url and t_url != '/':
                    tree_param[index]['selected'] = 'selected'
                index += 1
                children = tp['children']
                recursion_list(children, curren_url)
            return tree_param

        re_url = str(context['request']).split("'")[1]
        menu_list = recursion_list(menu_list, re_url)

        nodes.append(loader.render_to_string('../templates/site_left_menu_plugin.html', {'menu_list': json.dumps(menu_list)}))

註冊插件


xadmin.site.register_plugin(site_left_menu_plugin, BaseAdminView)

前端模板 site_left_menu_plugin.html

   {#<link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">#}
{#<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>#}
{#<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>#}
{#<![endif]-->#}
<link href="\static\css\xadmin.plugin.nt_site_left_menu_plugin.html.css" type="text/css" rel="stylesheet"/>
<span id="menu_list" style="display: none;">{{ menu_list }}</span>
<!-- 主頁側邊欄 -->
<div class="col-sm-12 col-md-2 nt-height" style="background: #f9f9f9;height: 850px;">
   <ul id="main-nav" class="nav nav-tabs nav-stacked">

   </ul>
</div>
<script type="text/javascript" src="\static\js\xadmin.plugin.nt_site_left_menu_plugin.html.js"></script>

js部分

var data = document.getElementById("menu_list").innerText;
function tree(data,count) {
    for (var i = 0; i < data.length; i++) {
        if (data[i].icon == "top") {    //一級菜單
            var span_input = '';
            var dropdown = '';
            if(data[i].children.length != 0){
                dropdown = "<span href='#dropdown_"+data[i].code+"'  data-toggle='collapse' class='pull-right glyphicon glyphicon-chevron-down'></span>";
            }
            if ((data[i].selected == "selected") && (data[i].to_url != "")) {
                span_input = "<li class='active' name='#dropdown_"+data[i].code+"'> <a href='" + data[i].to_url + "'>" + data[i].name + dropdown + "</a></li>";
            } else if (data[i].to_url == "") {
                span_input = "<li name='#dropdown_"+data[i].code+"'> <a style='color: black;'>" + data[i].name + dropdown +"</a></li>";
            } else {
                span_input = "<li name='#dropdown_"+data[i].code+"'> <a href='" + data[i].to_url + "'>" + data[i].name + dropdown +"</a></li>";
            }
            $("#main-nav").append(span_input);
        } else {
            var children = $("li[name='#dropdown_" + data[i].parentCode + "']").children("ul");
            if (children.length == 0) {
                 $("li[name='#dropdown_" + data[i].parentCode + "']").append("<ul id='dropdown_"+data[i].parentCode+"' class='nav nav-list collapse secondmenu in' style='height: auto;'></ul>")
                 count += 6;
            }
            var span_input = '';
            var dropdown = '';
            if(data[i].children.length != 0){
                dropdown = "<span href='#dropdown_"+data[i].code+"'  data-toggle='collapse' class='pull-right glyphicon glyphicon-chevron-down'></span>";
            }
            if((data[i].selected == "selected")&&(data[i].to_url != "")) {
                span_input = "<li name='#dropdown_"+data[i].code+"'> <a href='" + data[i].to_url + "'>" + '&nbsp;'.repeat(count)+ + data[i].name + dropdown + "</a></li>";
            }else if (data[i].to_url == "") {
                span_input = "<li name='#dropdown_"+data[i].code+"'> <a style='color: black;'>" + '&nbsp;'.repeat(count)+ data[i].name + dropdown +"</a></li>";
            } else {
                span_input = "<li name='#dropdown_"+data[i].code+"'> <a href='" + data[i].to_url + "'>" + '&nbsp;'.repeat(count)+ + data[i].name + dropdown +"</a></li>";
            }
            $("li[name='#dropdown_" + data[i].parentCode + "'] > ul").append(span_input)
        }
        tree(data[i].children,count);
    }
}
var json = JSON.parse(data);
tree(json,0);

css部分記得重定義柵格系統佈局

    width: 16%;
}
 .col-md-12{
    width: 83%;
}

#main-nav {
    margin-left: 1px;
}

#main-nav.nav-tabs.nav-stacked > li > a {
    padding: 10px 8px;
    font-size: 12px;
    font-weight: 600;
    color: #3a87ad;
    background: #E9E9E9;
    background: -moz-linear-gradient(top, #FAFAFA 0%, #E9E9E9 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FAFAFA), color-stop(100%,#E9E9E9));
    background: -webkit-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
    background: -o-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
    background: -ms-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
    background: linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9')";
    border: 1px solid #D5D5D5;
    border-radius: 4px;
}

#main-nav.nav-tabs.nav-stacked > li > a > span {
    color: #4A515B;
}

#main-nav.nav-tabs.nav-stacked > li.active > a, #main-nav.nav-tabs.nav-stacked > li > a:hover {
    color: #FFF;
    background: #357ebd;
    background: -moz-linear-gradient(top, #357ebd 0%, #357ebd 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#357ebd), color-stop(100%,#357ebd));
    background: -webkit-linear-gradient(top, #357ebd 0%,#357ebd 100%);
    background: -o-linear-gradient(top, #357ebd 0%,#357ebd 100%);
    background: -ms-linear-gradient(top, #357ebd 0%,#357ebd 100%);
    background: linear-gradient(top, #357ebd 0%,#357ebd 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#357ebd', endColorstr='#357ebd');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#357ebd', endColorstr='#357ebd')";
    border-color: #357ebd;
}

#main-nav.nav-tabs.nav-stacked > li.active > a, #main-nav.nav-tabs.nav-stacked > li > a:hover > span {
    color: white;
}

#main-nav.nav-tabs.nav-stacked > li {
    margin-bottom: 4px;
}

/*定義二級菜單樣式*/
.secondmenu a {
    font-size: 10px;
    color: #357ebd;
    margin-top:3px;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(229, 229, 229, 0.71)), to(#f1f1f1));
    border: solid 1px rgba(128, 128, 128, 0.09);
}

 .secondmenu a:hover{
    color: #FFF;
    background: #357ebd !important;
    border: solid 1px rgba(128, 128, 128, 0.09);
}

 .thirdmenu a {
    font-size: 10px;
    color: #357ebd;
    margin-left: 10%;
    background: #E9E9E9;
    border: solid 1px rgba(128, 128, 128, 0.09);
}
.navbar-static-top {
    background-color: #212121;
    margin-bottom: 5px;
}

.navbar-brand {
    display: inline-block;
    vertical-align: middle;
    padding-left: 50px;
    color: #fff;
}

.nt-height{
    height: 81.5%;
}

.nt-store-bg{
    height: 150px;
    margin: 20px 20px 20px 20px;
    background: rgba(66, 147, 223, 0.12);
}

.nt-main-bg{
    background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(217, 214, 159, 0.02)), to(rgba(74, 163, 247, 0.05)));
}