樹，因其清晰明了的展現(xiàn)形式而被廣泛的使用

日常的開發(fā)過程中我們需要經(jīng)常與“樹”打交道，例如公司的組織架構(gòu)樹、服務(wù)器的項(xiàng)目歸屬樹，管理后臺(tái)側(cè)邊樹等等，本篇文章介紹關(guān)于樹的兩個(gè)內(nèi)容

• 多功能的前端樹插件zTree
• Django中關(guān)于樹的model設(shè)計(jì)

zTree

zTree是一個(gè)開源的依靠JQuery實(shí)現(xiàn)的多功能樹插件，具有性能優(yōu)異、配置靈活、功能強(qiáng)大的特點(diǎn)

之前的系列前端插件文章已經(jīng)多次介紹過將前端插件引入自己項(xiàng)目中的方法，這里就不贅述了，如有問題也可以參考文章末尾給出的Demo代碼，在引入JS/CSS之后只需要如下代碼即可構(gòu)建一顆樹

<ul id="treeDemo" class="ztree"></ul>
<script>
 var setting = {
 data: {
 simpleData: {
  enable: true
 }
 }
 };
 var zNodes = [
 {id: 1, pId: 0, name: "OPS-COFFEE ", open: true},
 {id: 2, pId: 1, name: "運(yùn)營(yíng)部", open: true},
 {id: 3, pId: 1, name: "市場(chǎng)部", open: true},
 {id: 4, pId: 1, name: "綜合部", open: true},
 {id: 5, pId: 2, name: "產(chǎn)品部", open: true},
 {id: 6, pId: 2, name: "技術(shù)部", open: true},
 {id: 7, pId: 3, name: "銷售部", open: true},
 {id: 8, pId: 4, name: "人事部", open: true},
 {id: 9, pId: 4, name: "財(cái)務(wù)部", open: true},
 ];
 $.fn.zTree.init($("#treeDemo"), setting, zNodes);
</script>

$.fn.zTree.init 初始化樹，這里需要三個(gè)參數(shù)，第一個(gè)參數(shù)是加載樹結(jié)構(gòu)的Jquery對(duì)象， setting 為ztree的各種配置參數(shù)， zNodes 為ztree的具體數(shù)據(jù)

zTree的配置采用json的格式，按照配置類型分為了界面配置 view ，數(shù)據(jù)配置 data ，編輯配置 edit ，復(fù)選框配置 check ，異步加載配置 async 以及各種回調(diào)函數(shù)配置 callback ，配置豐富且強(qiáng)大

zTree支持兩種數(shù)據(jù)模式，簡(jiǎn)單數(shù)據(jù)模式和標(biāo)準(zhǔn)數(shù)據(jù)模式，簡(jiǎn)單數(shù)據(jù)模式就像我們上邊例子中這樣的數(shù)據(jù)結(jié)構(gòu)，而標(biāo)準(zhǔn)數(shù)據(jù)模式就需要將數(shù)據(jù)構(gòu)造成復(fù)雜的JSON嵌套格式，像下邊這樣

var zNodes = [{
 "name": "OPS-COFFEE",
 "open": true,
 "children": [
 {
  "name": "運(yùn)營(yíng)部",
  "open": true,
  "children": [
  {"name": "產(chǎn)品部","open": true},
  {"name": "技術(shù)部","open": true}
  ]
 },
 {
  "name": "市場(chǎng)部",
  "open": true,
  "children": [
  {"name": "銷售部","open": true}
  ]
 },
 {
  "name": "綜合部",
  "open": true,
  "children": [
  {"name": "人事部","open": true},
  {"name": "財(cái)務(wù)部","open": true}
  ]
 }
 ]
}];

標(biāo)準(zhǔn)模式數(shù)據(jù)結(jié)構(gòu)復(fù)雜但父子關(guān)系清晰，簡(jiǎn)單模式數(shù)據(jù)則相反，示例中我們使用了簡(jiǎn)單數(shù)據(jù)模式，需要配置simpleData的 enable 屬性為true

完成以上配置后可以看到頁面效果如下

Django

既然前端頁面已經(jīng)能夠正常展示樹了，后端就只需要返回前端對(duì)應(yīng)的數(shù)據(jù)格式即可，Django中最簡(jiǎn)單的方式就是使用Foreignkey的自關(guān)聯(lián)，模型設(shè)計(jì)如下：

class Department(models.Model):
    name = models.CharField(
        max_length=128, unique=True, verbose_name='名稱')
    parent = models.ForeignKey(
        'self', on_delete=models.PROTECT, db_constraint=False,
        null=True, blank=True, verbose_name='父部門')

ForeignKey第一個(gè)參數(shù)用 self 就表示自關(guān)聯(lián)，自己關(guān)聯(lián)自己，還有兩個(gè)Foreignkey的重要參數(shù)解釋如下：

on_delete：控制當(dāng)外鍵引用的對(duì)象被刪除時(shí)指定的SQL約束行為

• CASCADE：級(jí)聯(lián)刪除，當(dāng)你刪除數(shù)據(jù)時(shí)與之關(guān)聯(lián)的也會(huì)刪除
• PROTECT：保護(hù)模式，當(dāng)你刪除數(shù)據(jù)時(shí)會(huì)拋出 ProtectedError 的錯(cuò)誤
• SET_NULL：設(shè)置為空，當(dāng)你刪除數(shù)據(jù)時(shí)外鍵字段被設(shè)置為空，前提是有設(shè)置 null=True, blank=True
• SET_DEFAULT：設(shè)置默認(rèn)值，當(dāng)你刪除數(shù)據(jù)時(shí)外鍵字段設(shè)置為默認(rèn)值，前提是有設(shè)置 default 值
• DO_NOTHING：什么也不做，但這可能會(huì)導(dǎo)致你在調(diào)用數(shù)據(jù)時(shí)報(bào)錯(cuò)

SET：設(shè)置一個(gè)指定的自定義實(shí)例，官方案例如下

from django.conf import settings
from django.contrib.auth import get_user_model
from django.db import models
def get_sentinel_user():
 return get_user_model().objects.get_or_create(username='deleted')[0]
class MyModel(models.Model):
 user = models.ForeignKey(
 settings.AUTH_USER_MODEL,
 on_delete=models.SET(get_sentinel_user),
 )

這個(gè)案例的意思是當(dāng)刪除外鍵字段user有關(guān)聯(lián)時(shí)調(diào)用 get_sentinel_user 方法，這個(gè)方法會(huì)返回一個(gè)username為deleted的實(shí)例

db_constraint：控制是否在數(shù)據(jù)庫(kù)中為此外鍵創(chuàng)建約束，默認(rèn)為True。在數(shù)據(jù)庫(kù)中創(chuàng)建外鍵約束是 數(shù)據(jù)庫(kù)規(guī)范中明令禁止 的行為，那么我們可以設(shè)置 db_constraint 為 False 從而不在數(shù)據(jù)庫(kù)層面創(chuàng)建約束，但同樣可以使用Django為Foreignkey提供的各種關(guān)聯(lián)查詢

接下來可以通過如下代碼將數(shù)據(jù)庫(kù)中的數(shù)據(jù)轉(zhuǎn)成ztree所能使用的簡(jiǎn)單模式數(shù)據(jù)并返回

def tree(request):
 mList = Department.objects.all()
 _data = [
 {
  'id': x.id,
  'name': x.name,
  'pId': x.parent.id if x.parent else 0, 'open': 1
 } for x in mList
 ]
 return render(request, 'tree.html', {'data': _data})

注意在前端使用時(shí)需要用 {{data|safe}} 的方式，添加 |safe 主要是因?yàn)镈jango為了安全默認(rèn)會(huì)對(duì)HTML、JS等語法標(biāo)簽進(jìn)行轉(zhuǎn)義，但我們所傳給前端的數(shù)據(jù)不希望轉(zhuǎn)義可以通過添加 |safe 來實(shí)現(xiàn)

完整Demo

文章源碼已上傳至Github，除了以上基礎(chǔ)代碼外還包含下拉框加載樹等功能，

源碼地址如下：https://github.com/ops-coffee/demo/tree/master/tree

總結(jié)

以上所述是小編給大家介紹的Django+zTree構(gòu)建組織架構(gòu)樹的方法，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

最新評(píng)論