如何使用树创建动态菜单

-1

我有一个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 
    ] 
}

所以，我真的不知道逻辑和数据库表设计（菜单）。我应该在Controller还是其他地方生成上面的JSON？你能否提出有关这个问题的建议和样本方法？

来源

2017-10-04 Clint Eastwood

@StephenMuecke嗨Stephane，很抱歉，我对这个问题没有经验。如果你有时间，可否请你举个例子？或者建议我在网络上使用示例页面？在此先感谢... –

@StephenMuecke亲爱的Stephane，我生病了，不能看你的答案。你为什么要删除它？你可以再发布一次吗？：（（ –

您的数据库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而不是硬编码字符串。

来源

2017-10-04 10:14:29

哦，非常感谢！..我会尽快尝试并告知你结果...投票+ –

如何使用树创建动态菜单

回答

相关问题