使用django-treebeard實現樹型別儲存與編輯

程序设计实验室發表於2024-08-04
Django型別

前言

其實之前做很多專案都有遇到跟樹相關的功能，以前都是自己實現的，然後前端很多UI元件庫都有Tree元件，套上去就可以用。

不過既然用 Django 了，還是得充分發揮一下生態的優勢，但是我找了半天，也就這個 treebeard 能用，其他要不停更了要不就功能很拉，沒有視覺化編輯樹的功能。

難道Django已經沒落了？

效果

以這個汽車改裝專案為例

實現以下效果，可以拖動節點進行編輯

image

安裝

安裝依賴

pdm add django-treebeard

將 treebeard 新增到 INSTALLED_APPS

定義model

繼承 MP_Node 型別就可以

from treebeard.mp_tree import MP_Node

class CaseCategory(MP_Node):
    name = models.CharField('類別名稱', max_length=100)
    node_order_by = ['name']

    def __str__(self):
        return '改裝類別: {}'.format(self.name)

    class Meta:
        db_table = 'car_case_category'
        verbose_name = '改裝類別'
        verbose_name_plural = verbose_name

配置 admin

需要繼承 TreeAdmin 才能實現視覺化的樹編輯

from treebeard.admin import TreeAdmin

@admin.register(CaseCategory)
class CaseCategoryAdmin(TreeAdmin):
    form = movenodeform_factory(CaseCategory)
    list_display = ['name', 'depth']
    search_fields = ['name']

初始化資料

可以使用程式碼把初始化的Tree資料匯入

（事實上是因為不先匯入初始化資料，admin介面連個新增按鈕都沒有……估計是bug）

def seed_data_treebeard():
    from apps.car.models import CaseCategory
    get = lambda node_id: CaseCategory.objects.get(pk=node_id)
    root = CaseCategory.add_root(name='車衣')
    node = get(root.pk).add_child(name='亮面/光面')
    node = get(root.pk).add_child(name='磨砂/啞光')
    root = CaseCategory.add_root(name='改色')
    get(root.pk).add_child(name='純色系')
    get(root.pk).add_child(name='漸變色')
    get(root.pk).add_child(name='定製彩繪')
    root = CaseCategory.add_root(name='改裝')
    get(root.pk).add_child(name='輪轂')
    get(root.pk).add_child(name='剎車')
    get(root.pk).add_child(name='避震')
    root = CaseCategory.add_root(name='省心提')

這樣開啟admin介面就可以看到了

算是能用吧

寫個介面

然後我再寫個簡單的介面，基於 django-ninja

（實際上這些程式碼是 DjangoStarter 自動生成的）

from typing import List
from django.shortcuts import get_object_or_404
from ninja import Router, ModelSchema
from django_starter.http.response import responses

router = Router(tags=['case_category'])

class CaseCategoryOut(ModelSchema):
    class Meta:
        model = CaseCategory
        fields = ['id', 'path', 'depth', 'numchild', 'name', ]

@router.get('/', response=List[CaseCategoryOut], url_name='car/case_category/list')
def list_items(request):
    qs = CaseCategory.objects.all()
    return qs

結果出來的資料是這樣（省略部分資料）

{
  "code": 200,
  "data": [
    {
      "id": 4,
      "path": "0001",
      "depth": 1,
      "numchild": 3,
      "name": "改色"
    },
    {
      "id": 7,
      "path": "00010001",
      "depth": 2,
      "numchild": 0,
      "name": "定製彩繪"
    },
    {
      "id": 6,
      "path": "00010002",
      "depth": 2,
      "numchild": 0,
      "name": "漸變色"
    }
  ]
}

小結

還是自己實現的舒服。

不過這個也算是開箱即用了，小專案的話隨便搞搞還是可以的。

參考資料

  • https://django-treebeard.readthedocs.io/

相關文章