Giao diện
@digiforce-nc/plugin-collection-tree
Plugin collection dạng cây — tổ chức dữ liệu collection theo cấu trúc phân cấp (cha-con) sử dụng mô hình adjacency list.
Plugin này làm gì?
Nhiều loại dữ liệu có tính phân cấp: danh mục sản phẩm, cơ cấu tổ chức, menu đa cấp, thư mục tài liệu. Plugin bổ sung field parentId vào collection, cho phép hiển thị và thao tác dữ liệu dạng cây với khả năng mở rộng/thu gọn, kéo-thả sắp xếp và lọc theo nhánh.
Cơ chế hoạt động
Tính năng chính
| # | Tính năng | Mô tả |
|---|---|---|
| 1 | Adjacency list | Mô hình parent-child (field parentId) |
| 2 | Lazy loading | Chỉ load children khi expand node |
| 3 | Drag & drop | Kéo-thả để di chuyển node giữa các nhánh |
| 4 | Path field | Tự sinh đường dẫn (path) cho breadcrumb |
| 5 | Filter by branch | Lọc dữ liệu theo nhánh cây |
| 6 | Sort order | Sắp xếp thứ tự node con trong cùng cha |
| 7 | Tree table | Hiển thị kết hợp cây + bảng |
API endpoints
| Endpoint | Mô tả |
|---|---|
collection:tree | Lấy dữ liệu cấu trúc cây (root → children) |
collection:move | Di chuyển node sang parent mới |
collection:reorder | Đổi thứ tự node con |
Cấu hình collection
| Tham số | Mô tả |
|---|---|
tree | 'adjacency-list' — bật chế độ cây |
parentForeignKey | Field liên kết cha (mặc định parentId) |
pathField | Field lưu path (VD: 1/2/5) |
sortField | Field sắp xếp thứ tự |
Thành phần client
| Thành phần | Mô tả |
|---|---|
TreeBlock | Block hiển thị collection dạng cây |
TreeTable | Bảng kết hợp cây (tree column + data columns) |
TreeSelect | Dropdown chọn node trong cây |
DragDropTree | Cây kéo-thả sắp xếp |
BreadcrumbPath | Breadcrumb dựa trên path field |
Dependencies
| Package | Vai trò |
|---|---|
@digiforce-nc/server | Server framework |
@digiforce-nc/database | Database ORM — tree query |
@digiforce-nc/client | Client UI framework |
@digiforce-nc/collection-manager | Quản lý collection schema |
Lưu ý triển khai
- Adjacency list đơn giản nhưng query cây sâu cần recursive CTE
- Dữ liệu lớn (hàng ngàn node) nên dùng lazy loading
- Tránh tạo circular reference (A → B → C → A)