python django 多級業務樹形結構規划及頁面渲染

概述：

　　在項目中，父級到子級結構並不少見，如果僅僅的兩層樹形結構，我們可以使用數據庫的外鍵設計輕松做到，子級業務表設計一字段外鍵到父級業務表，這樣子到父、父到子的查詢都非常簡單。

　　但是往往父子結構會有一級二級三級等等多層規划，因為子結構的層數是不定的，子可以有子，再子；這樣的樹形下去，外鍵設計就不可行了。

項目說明

　　設計一個 業務 樹形結構規划，多層靈活型結構，

　　從 建表設計 到  瀏覽器前端展示 整體的結構規划

　　使用 python django web框架；和一個js 樹形結構插件treeview（插件說明 http://www.cnblogs.com/jyh317/p/3763564.html）

表設計

　　使用django models 設計表， 字段如下，新增業務時，在 upper_business 字段填上該業務的直屬上級業務 ID 號（此id號為該表中已經存在的業務id號），若新增業務為最上級業務 upper_business 為空。

#工作業務
class Business_detail(models.Model):
    upper_business = models.IntegerField(blank=True, null=True, verbose_name=u'上級業務')
    name = models.CharField(max_length=100, unique=True, verbose_name=u'業務名稱')
    info = models.TextField(max_length=200, null=True, blank=True, verbose_name=u'業務說明')
    domain = models.CharField(max_length=50, null=True, blank=True, verbose_name=u'域名')
    monitor_url = models.CharField(max_length=50, null=True, blank=True, verbose_name=u'監控頁面')
    comment = models.CharField(max_length=100, blank=True, null=True, verbose_name=u'備注')

　　在 django admin 后台添加新業務如圖；可自行設計自己的前端新增業務頁面，約束字段（如上級業務必須填寫已存在id）

########  開始前端展示 #########

視圖函數

 　　在django views 中添加業務展示視圖，使用django 特色models 查詢出第一級業務（第一級業務唯一）傳遞到模板層

def businessBasic(request):
    businessObj = Business_detail.objects.all()
    firster = businessObj.get(id=1)     #得到第一級業務
    return render_to_response('eams/businessBasic.html', locals())

前端模板

　　瀏覽此下之前，需要對js 樹形結構插件treeview 的使用有所了解

　　先載入treeview js文件

<link href="/static/treeview/jquery.treeview.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/static/treeview/lib/jquery.cookie.js"></script>
    <script type="text/javascript" src="/static/treeview/jquery.treeview.js"></script>

　　業務樹div 主體設計

        {% load eamsfilter %}    <!-- 載入自定義模板過濾器 -->
        <div style="width: 30%; border-right: 1px solid #D8D8D8; min-height: 300px; overflow: auto; float: left">
            <ul id="tree" class="filetree">
                <li><span id="business_{{ firster.id }}" class="folder">{{ firster.name }}</span>
                    {% if firster.id|getNextBusiness %}　　<!-- 使用模板過濾器，判斷得到直屬下級業務列表，過濾器代碼在樓下 -->
                        <ul>
                        {% for node in firster.id|getNextBusiness %}　<!-- 遍歷下級業務節點 -->
                            {% include "eams/businessNode.html" %}　　<!-- 引用業務節點 li 模板，（此處核心設計）樓下單獨解釋 -->
                        {% endfor %}
                        </ul>
                    {% endif %}
                </li>
            </ul>
            <script type="text/javascript">
            $("#tree").treeview();
            </script>
        </div>

　　模板過濾器（eamsfilter.py）代碼， 此處不做更多解釋

#-*-coding:utf-8-*-
__author__ = 'zhouwang'
from eams_apps.models import *
from django import template
register = template.Library()
@register.filter(name='getNextBusiness')
def getNextBusiness(value):
    return Business_detail.objects.filter(upper_business = value)

　　節點模板（核心）eams/businessNode.html，當父級業務判斷有下級業務時，引入此模板，提出節點代碼為單獨的html文件，方便復用及模板層的迭代，模板迭代的設計，實現業務節點多層（未知層數）結構展示

{% load eamsfilter %}　　<!-- 載入過濾器 -->
<li><span id="business_{{ node.id }}" class="folder">{{ node.name }}</span>　　<!-- 渲染當前遍歷的節點 -->
    {% if node.id|getNextBusiness %}　　<!-- 通過過濾器， 判斷得到當前業務節點是否有下級業務-->
        <ul>
        {% for node in node.id|getNextBusiness %}　　<!-- 遍歷當前業務節點的下級業務節點 -->
            {% include "eams/businessNode.html" %}　　<!-- 再次引入自身頁面、判斷節點、遍歷節點等等， 實現深層迭代得到多級業務節點 -->
        {% endfor %}
        </ul>
    {% endif %}
</li>

前端效果

　　模板代碼預留了業務節點 id 號，前端點擊觸發業務節點，ajax 請求節點業務信息及頁面展示獲取的節點信息， 不再繼續闡述。。。