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


概述:

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

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

項目說明

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

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

  使用 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 請求節點業務信息及頁面展示獲取的節點信息, 不再繼續闡述。。。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM