如何使用樹創建動態菜單

-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

哦，非常感謝！..我會盡快嘗試並告知你結果...投票+ –

如何使用樹創建動態菜單

回答

相關問題