Comment créer un menu dynamique en utilisant l'arborescence

Question

J'ai un projet Angular mais ce n'est pas directement lié à Angular et j'ai juste besoin de la logique de créer un menu dynamique en utilisant tree qui peut aussi être similaire au projet ASP.NET MVC. Donc, votre suggestion pour ASP.NET MVC, etc. sera également utile pour moi.

J'utilise PrimeNG Tree et que vous souhaitez obtenir le menu d'une table dans la base de données MSSQL:

Tableau des menus (les données ont été changé par exemple l'utilisation):

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

Pour Pour remplir les éléments de menu, j'ai besoin de générer une chaîne JSON comme indiqué ci-dessous:

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

Donc, je n'ai vraiment aucune idée de la logique et de la conception de la table de base de données (menus). Dois-je générer le JSON ci-dessus sur le contrôleur ou un autre endroit? Pourriez-vous s'il vous plaît poster des suggestions et des exemples d'approches concernant cette question?

Answer 1

Votre base de données Menu table est bien pour générer le TreeView en utilisant le plug-in PrimeNG Tree sauf que vous pouvez inclure une propriété supplémentaire pour la propriété data si vous voulez. Je vous suggérerais cependant de rendre la propriété ParentId NULL afin que votre élément de premier niveau (Documents) ait une valeur null plutôt que 0.

Pour passer JSON dans ce format, votre modèle doivent être

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

Vous pouvez également inclure d'autres propriétés telles que

public string data { get; set; } 

pour correspondre aux propriétés du api

Vous avez également besoin d'un modèle parent pour la propriété data

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

Pour générer le modèle, votre code contrôleur serait (noter que ceci est basé sur le champ ParentId étant null pour l'élément de niveau supérieur comme indiqué plus haut)

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

Pour vos icônes, vous devriez envisager une const valeurs ou un enum plutôt que des chaînes de codage en dur.