如何使用树创建动态菜单

Question

我有一个 Angular 项目，但这与 Angular 没有直接关系，我只需要使用树创建动态菜单的逻辑，它也可以与 ASP.NET MVC 项目中的类似。因此，您对 ASP.NET MVC 等的建议也将对我有所帮助。

我使用 PrimeNG Tree 并想从 MSSQL 数据库中的表中获取菜单：

菜单表（数据已更改，例如使用情况）：

Id     |     Order     |     ParentId     |     Name     |

1            1               0                  Documents
2            1               1                  Work
3            1               2                  Expenses.doc
4            2               2                  Resume.doc
5            2               1                  Home
6            1               5                  Invoices.txt
...

为了填充菜单项，我需要生成如下所示的 JSON 字符串：

{
    "data": 
    [
        {
            "label": "Documents",
            "data": "Documents Folder",
            "expandedIcon": "fa-folder-open",
            "collapsedIcon": "fa-folder",
            "children": [{
                    "label": "Work",
                    "data": "Work Folder",
                    "expandedIcon": "fa-folder-open",
                    "collapsedIcon": "fa-folder",
                    "children": [{"label": "Expenses.doc", "icon": "fa-file-word-o", "data": "Expenses Document"}, {"label": "Resume.doc", "icon": "fa-file-word-o", "data": "Resume Document"}]
                },
                {
                    "label": "Home",
                    "data": "Home Folder",
                    "expandedIcon": "fa-folder-open",
                    "collapsedIcon": "fa-folder",
                    "children": [{"label": "Invoices.txt", "icon": "fa-file-word-o", "data": "Invoices for this month"}]
                }]
        },
        ... //omitted for brevity
    ]
}

所以，我真的不知道逻辑和数据库表设计（菜单）。我应该在控制器或其他地方生成上面的 JSON 吗？您能否发布有关此问题的建议和示例方法？

Answer 1

您的数据库Menu 表可以使用 PrimeNG Tree 插件生成树视图，但如果需要，您可能希望为data 属性包含一个附加属性。但是，我建议您将 ParentId 属性设为可为空，以便您的顶级项目 (Documents) 具有 null 值而不是 0。

为了以这种格式传递 json，您的模型需要是

public class MenuVM
{
    public int Id { get; set; } // this is only used for grouping
    public string label { get; set; }
    public string expandedIcon { get; set; }
    public string collapsedIcon { get; set; }
    public string icon { get; set; }
    public IEnumerable<MenuVM> children { get; set; }
}

您还可以包括其他属性，例如

public string data { get; set; }

匹配api中的属性

您还需要data 属性的父模型

public class TreeVM
{
    public IEnumerable<MenuVM> data { get; set; }
}

要生成模型，您的控制器代码将是（注意这是基于 ParentId 字段为 null 的顶级项目，如上所述）

// Sort and group the menu items
var groups = db.Menus
    .OrderBy(x => x.ParentId).ThenBy(x => x.Order)
    .ToLookup(x => x.ParentId, x => new MenuVM
    {
        Id = x.Id,
        label = x.Name
    });
// Assign children
foreach (var item in groups.SelectMany(x => x))
{
    item.children = groups[item.Id].ToList();
    if (item.children.Any())
    {
        .... // apply some logic if there a child items, for example setting 
             // the expandedIcon and collapsedIcon properties
    }
    else
    {
        .... // apply some logic if there are no child items, for example setting 
             // the icon properties - e.g. item.icon = "fa-file-word-o";
    }
}
// Initialize model to be passed to the view
TreeVM model = new TreeVM
{
    data = groups[null].ToList();
}
return Json(model, JsonRequestBehavior.AllowGet);

对于您的图标，您应该考虑一些const 值或enum，而不是硬编码字符串。