概述:
在項目中,父級到子級結構並不少見,如果僅僅的兩層樹形結構,我們可以使用數據庫的外鍵設計輕松做到,子級業務表設計一字段外鍵到父級業務表,這樣子到父、父到子的查詢都非常簡單。
但是往往父子結構會有一級二級三級等等多層規划,因為子結構的層數是不定的,子可以有子,再子;這樣的樹形下去,外鍵設計就不可行了。
項目說明
設計一個 業務 樹形結構規划,多層靈活型結構,
從 建表設計 到 瀏覽器前端展示 整體的結構規划
使用 python django web框架;和一個js 樹形結構插件treeview(插件說明 http://www.cnblogs.com/jyh317/p/3763564.html)
表設計
使用django models 設計表, 字段如下,新增業務時,在 upper_business 字段填上該業務的直屬上級業務 ID 號(此id號為該表中已經存在的業務id號),若新增業務為最上級業務 upper_business 為空。
1 #工作業務 2 class Business_detail(models.Model): 3 upper_business = models.IntegerField(blank=True, null=True, verbose_name=u'上級業務') 4 name = models.CharField(max_length=100, unique=True, verbose_name=u'業務名稱') 5 info = models.TextField(max_length=200, null=True, blank=True, verbose_name=u'業務說明') 6 domain = models.CharField(max_length=50, null=True, blank=True, verbose_name=u'域名') 7 monitor_url = models.CharField(max_length=50, null=True, blank=True, verbose_name=u'監控頁面') 8 comment = models.CharField(max_length=100, blank=True, null=True, verbose_name=u'備注')
在 django admin 后台添加新業務如圖;可自行設計自己的前端新增業務頁面,約束字段(如上級業務必須填寫已存在id)
######## 開始前端展示 #########
視圖函數
在django views 中添加業務展示視圖,使用django 特色models 查詢出第一級業務(第一級業務唯一)傳遞到模板層
1 def businessBasic(request): 2 businessObj = Business_detail.objects.all() 3 firster = businessObj.get(id=1) #得到第一級業務 4 return render_to_response('eams/businessBasic.html', locals())
前端模板
瀏覽此下之前,需要對js 樹形結構插件treeview 的使用有所了解
先載入treeview js文件
1 <link href="/static/treeview/jquery.treeview.css" rel="stylesheet" type="text/css" /> 2 <script type="text/javascript" src="/static/treeview/lib/jquery.cookie.js"></script> 3 <script type="text/javascript" src="/static/treeview/jquery.treeview.js"></script>
業務樹div 主體設計
1 {% load eamsfilter %} <!-- 載入自定義模板過濾器 --> 2 <div style="width: 30%; border-right: 1px solid #D8D8D8; min-height: 300px; overflow: auto; float: left"> 3 <ul id="tree" class="filetree"> 4 <li><span id="business_{{ firster.id }}" class="folder">{{ firster.name }}</span> 5 {% if firster.id|getNextBusiness %} <!-- 使用模板過濾器,判斷得到直屬下級業務列表,過濾器代碼在樓下 --> 6 <ul> 7 {% for node in firster.id|getNextBusiness %} <!-- 遍歷下級業務節點 --> 8 {% include "eams/businessNode.html" %} <!-- 引用業務節點 li 模板,(此處核心設計)樓下單獨解釋 --> 9 {% endfor %} 10 </ul> 11 {% endif %} 12 </li> 13 </ul> 14 <script type="text/javascript"> 15 $("#tree").treeview(); 16 </script> 17 </div>
模板過濾器(eamsfilter.py)代碼, 此處不做更多解釋
1 #-*-coding:utf-8-*- 2 __author__ = 'zhouwang' 3 from eams_apps.models import * 4 from django import template 5 register = template.Library() 6 @register.filter(name='getNextBusiness') 7 def getNextBusiness(value): 8 return Business_detail.objects.filter(upper_business = value)
節點模板(核心)eams/businessNode.html,當父級業務判斷有下級業務時,引入此模板,提出節點代碼為單獨的html文件,方便復用及模板層的迭代,模板迭代的設計,實現業務節點多層(未知層數)結構展示
1 {% load eamsfilter %} <!-- 載入過濾器 --> 2 <li><span id="business_{{ node.id }}" class="folder">{{ node.name }}</span> <!-- 渲染當前遍歷的節點 --> 3 {% if node.id|getNextBusiness %} <!-- 通過過濾器, 判斷得到當前業務節點是否有下級業務--> 4 <ul> 5 {% for node in node.id|getNextBusiness %} <!-- 遍歷當前業務節點的下級業務節點 --> 6 {% include "eams/businessNode.html" %} <!-- 再次引入自身頁面、判斷節點、遍歷節點等等, 實現深層迭代得到多級業務節點 --> 7 {% endfor %} 8 </ul> 9 {% endif %} 10 </li>
前端效果
模板代碼預留了業務節點 id 號,前端點擊觸發業務節點,ajax 請求節點業務信息及頁面展示獲取的節點信息, 不再繼續闡述。。。