So erstellen Sie dynamische Menü mit Baum

Question

Ich habe ein Angular-Projekt, aber das ist nicht direkt mit Angular verwandt und ich brauche nur die Logik des dynamischen Menüs mit Baum erstellen, die auch ähnlich wie in ASP.NET MVC-Projekt sein kann. Also, Ihr Vorschlag für ASP.NET MVC, etc. wird auch hilfreich für mich sein.

Ich benutze PrimeNG Tree und will Menü aus einer Tabelle in MSSQL-Datenbank erhalten:

Menü Tabelle (die Daten wurden zum Beispiel Nutzung geändert):

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 
... 

Um Um die Menüeinträge aufzufüllen, muss ich eine JSON-Zeichenfolge wie folgt generieren:

{ 
    "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 
    ] 
} 

Also, ich habe wirklich keine Ahnung über die Logik und die Datenbanktabelle Design (Menüs). Sollte ich den JSON oben auf dem Controller oder an einem anderen Ort generieren? Könnten Sie bitte Vorschläge und Lösungsansätze zu diesem Thema veröffentlichen?

Answer 1

Ihre Datenbank Menu Tabelle ist in Ordnung, um die Treeview mit dem PrimeNG Tree Plugin zu erzeugen, außer dass Sie eine zusätzliche Eigenschaft für die data Eigenschaft hinzufügen möchten, wenn Sie möchten. Ich würde jedoch vorschlagen, dass Sie die ParentId Eigenschaft Nullable machen, so dass Ihr Top-Level-Artikel (Documents) hat einen null Wert eher, dass 0.

Um json in diesem Format zu übergeben, müssen Sie Ihr Modell

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; } 
} 

Sie könnten auch andere Eigenschaften wie

public string data { get; set; } 

passen die Eigenschaften in der api

sein

Sie benötigen auch ein übergeordnetes Modell für die data Eigenschaft

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

Um das Modell zu generieren, würden Sie Controller-Code (die null für die Top-Level-Element beachten Sie dies auf der Grundlage der ParentId Feld ist wie oben erwähnt) sein

// 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); 

Für Ihre Symbole, sollten Sie einige const betrachten Werte oder ein enum anstatt hart codierenden Strings.