Implementing Tree-Type Storage and Editing with django-treebeard

Preface

Actually，in many previous projects，I encountered features related to trees. In the past，I always implemented them myself. Later on，many frontend UI component libraries included Tree components，which you could just plug in and use.

However，since we’re using Django，it’s important to make full use of its ecosystem. But after searching for a long time，the only usable option I found was this treebeard. The others have either been discontinued or have very limited functionality—they lack visual tree-editing capabilities.

Could it be that Django has already declined?

Effect

Take this car modification project as an example.

Achieve the following effect, which allows dragging nodes for editing.

Installation

Install dependencies

pdm add django-treebeard

Add treebeard to INSTALLED_APPS

Defining a Model

Just inherit from the MP_Node type.

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

Configure admin

To implement visual tree editing, you need to inherit from TreeAdmin.

from treebeard.admin import TreeAdmin

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

Initializing Data

You can use code to import the initial Tree data.

(In fact, it's because if you don't import the initialization data first, the admin interface won't even show an add button... I guess it's a 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='省心提')

This way, once you open the admin interface, you'll be able to see the data.

Good enough, I guess.

Write an API Endpoint

Then I'll write a simple API endpoint based on django-ninja

(Actually, this code is auto-generated by 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

The resulting data looks like this (some data omitted)

{
  "code": 200,
  "data": [
    {
      "id": 4,
      "path": "0001",
      "depth": 1,
      "numchild": 3,
      "name": "Color Change"
    },
    {
      "id": 7,
      "path": "00010001",
      "depth": 2,
      "numchild": 0,
      "name": "Custom Airbrush Painting"
    },
    {
      "id": 6,
      "path": "00010002",
      "depth": 2,
      "numchild": 0,
      "name": "Gradient Color"
    }
  ]
}

Summary

Still more comfortable with a self-implemented solution.

But this one is pretty much out of the box too—it's fine for tinkering around in small projects.

References

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