Django+zTree構建組織架構樹

樹，因其清晰明瞭的展示形式而被普遍的使用

平常的開發過程當中咱們須要常常與「樹」打交道，例如公司的組織架構樹、服務器的項目歸屬樹，管理後臺側邊樹等等，本篇文章介紹關於樹的兩個內容

1. 多功能的前端樹插件zTree
2. Django中關於樹的model設計

zTree

zTree是一個開源的依靠JQuery實現的多功能樹插件，具備性能優異、配置靈活、功能強大的特色

以前的系列前端插件文章已經屢次介紹過將前端插件引入本身項目中的方法，這裏就不贅述了，若有問題也能夠參考文章末尾給出的Demo代碼，在引入JS/CSS以後只須要以下代碼便可構建一顆樹

<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: "運營部", open: true},
      {id: 3, pId: 1, name: "市場部", open: true},
      {id: 4, pId: 1, name: "綜合部", open: true},
      {id: 5, pId: 2, name: "產品部", open: true},
      {id: 6, pId: 2, name: "技術部", open: true},
      {id: 7, pId: 3, name: "銷售部", open: true},
      {id: 8, pId: 4, name: "人事部", open: true},
      {id: 9, pId: 4, name: "財務部", open: true},
    ];

    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
</script>
複製代碼

$.fn.zTree.init初始化樹，這裏須要三個參數，第一個參數是加載樹結構的Jquery對象，setting爲ztree的各類配置參數，zNodes爲ztree的具體數據

zTree的配置採用json的格式，按照配置類型分爲了界面配置view，數據配置data，編輯配置edit，複選框配置check，異步加載配置async以及各類回調函數配置callback，配置豐富且強大

zTree支持兩種數據模式，簡單數據模式和標準數據模式，簡單數據模式就像咱們上邊例子中這樣的數據結構，而標準數據模式就須要將數據構形成複雜的JSON嵌套格式，像下邊這樣

var zNodes = [{
  "name": "OPS-COFFEE",
  "open": true,
  "children": [
      {
          "name": "運營部",
          "open": true,
          "children": [
              {"name": "產品部","open": true},
              {"name": "技術部","open": true}
          ]
      },
      {
          "name": "市場部",
          "open": true,
          "children": [
              {"name": "銷售部","open": true}
          ]
      },
      {
          "name": "綜合部",
          "open": true,
          "children": [
              {"name": "人事部","open": true},
              {"name": "財務部","open": true}
          ]
      }
  ]
}];
複製代碼

標準模式數據結構複雜但父子關係清晰，簡單模式數據則相反，示例中咱們使用了簡單數據模式，須要配置simpleData的enable屬性爲true

完成以上配置後能夠看到頁面效果以下

Django

既然前端頁面已經可以正常展現樹了，後端就只須要返回前端對應的數據格式便可，Django中最簡單的方式就是使用Foreignkey的自關聯，模型設計以下：

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第一個參數用self就表示自關聯，本身關聯本身，還有兩個Foreignkey的重要參數解釋以下：

on_delete： 控制當外鍵引用的對象被刪除時指定的SQL約束行爲

• CASCADE：級聯刪除，當你刪除數據時與之關聯的也會刪除
• PROTECT：保護模式，當你刪除數據時會拋出ProtectedError的錯誤
• SET_NULL：設置爲空，當你刪除數據時外鍵字段被設置爲空，前提是有設置null=True, blank=True
• SET_DEFAULT：設置默認值，當你刪除數據時外鍵字段設置爲默認值，前提是有設置default值
• DO_NOTHING：什麼也不作，但這可能會致使你在調用數據時報錯
• SET：設置一個指定的自定義實例，官方案例以下

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),
    )
複製代碼

這個案例的意思是當刪除外鍵字段user有關聯時調用get_sentinel_user方法，這個方法會返回一個username爲deleted的實例

db_constraint： 控制是否在數據庫中爲此外鍵建立約束，默認爲True。在數據庫中建立外鍵約束是數據庫規範中明令禁止的行爲，那麼咱們能夠設置db_constraint爲False從而不在數據庫層面建立約束，但一樣可使用Django爲Foreignkey提供的各類關聯查詢

接下來能夠經過以下代碼將數據庫中的數據轉成ztree所能使用的簡單模式數據並返回

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})
複製代碼

注意在前端使用時須要用{{data|safe}}的方式，添加|safe主要是由於Django爲了安全默認會對HTML、JS等語法標籤進行轉義，但咱們所傳給前端的數據不但願轉義能夠經過添加|safe來實現

完整Demo

文章源碼已上傳至Github，除了以上基礎代碼外還包含下拉框加載樹等功能，公衆號後臺回覆06獲取源碼地址吧

---

相關文章推薦閱讀：

• 前端插件之Datatables使用--下篇
• Django使用Channels實現WebSocket--下篇