如何從json創建子子菜單

Question

我從json文件創建了一個水平菜單。但我無法創建子女和子女。當我創建管理員的孩子時，它會回家的孩子。我的JavaScript文件是

var data = [{ 
    "menu":[ 
     { 
      "MenuId":1, 
      "MenuName":"Home", 
      "MenuLink":null, 
      "Action":null, 
      "Controller":null, 
      "ParentID":null, 
      "SortOrder":1, 
      "ModuleId":null, 
      "Menus":{ 
      } 
     }, 
     { 
      "MenuId":2, 
      "MenuName":"New Transaction", 
      "MenuLink":null, 
      "Action":null, 
      "Controller":null, 
      "ParentID":null, 
      "SortOrder":2, 
      "ModuleId":null, 
      "Menus":{ 
      } 
     }, 
     { 
      "MenuId":3, 
      "MenuName":"Portfolio", 
      "MenuLink":null, 
      "Action":null, 
      "Controller":null, 
      "ParentID":null, 
      "SortOrder":3, 
      "ModuleId":null, 
      "Menus":{ 
      } 
     }, 
     { 
      "MenuId":4, 
      "MenuName":"Analytics", 
      "MenuLink":null, 
      "Action":null, 
      "Controller":null, 
      "ParentID":null, 
      "SortOrder":4, 
      "ModuleId":null, 
      "Menus":{ 
      } 
     }, 
     { 
      "MenuId":5, 
      "MenuName":"Instructions", 
      "MenuLink":null, 
      "Action":null, 
      "Controller":null, 
      "ParentID":null, 
      "SortOrder":5, 
      "ModuleId":null, 
      "Menus":{ 
      } 
     }, 
     { 
      "MenuId":6, 
      "MenuName":"Data Upload", 
      "MenuLink":null, 
      "Action":null, 
      "Controller":null, 
      "ParentID":null, 
      "SortOrder":6, 
      "ModuleId":null, 
      "Menus":{ 
      } 
     }, 
     { 
      "MenuId":7, 
      "MenuName":"Administration", 
      "MenuLink":null, 
      "Action":null, 
      "Controller":null, 
      "ParentID":null, 
      "SortOrder":7, 
      "ModuleId":null, 
      "Menus":[ 
       { 
        "MenuId":8, 
        "MenuName":"Masters", 
        "MenuLink":null, 
        "Action":null, 
        "Controller":null, 
        "ParentID":7, 
        "SortOrder":1, 
        "ModuleId":null, 
        "Menus":[ 
         { 
          "MenuId":10, 
          "MenuName":"Currency", 
          "MenuLink":"/Currencies/Index", 
          "Action":"Index", 
          "Controller":"Currencies", 
          "ParentID":8, 
          "SortOrder":1, 
          "ModuleId":null, 
          "Menus":{ 
          } 
         }, 
         { 
          "MenuId":11, 
          "MenuName":"Country", 
          "MenuLink":"/Countries/Index", 
          "Action":"Index", 
          "Controller":"Countries", 
          "ParentID":8, 
          "SortOrder":2, 
          "ModuleId":null, 
          "Menus":{ 
          } 
         } 
        ] 
       }, 
       { 
        "MenuId":9, 
        "MenuName":"User Management", 
        "MenuLink":null, 
        "Action":null, 
        "Controller":null, 
        "ParentID":7, 
        "SortOrder":2, 
        "ModuleId":null, 
        "Menus":{ 
        } 
       } 
      ] 
     } 
    ] 
} 
]; 
$(function() { 
for(var i = 0, j = data[0].menu.length; i<j; i++) { 
    var root_menu = data[0].menu[i]; 
    if(root_menu.hasOwnProperty("MenuId")) { 
     $("#menu").append('<li><a href="#" class="parent-menu">' + root_menu.MenuName + '</a>'); 
     if(root_menu.hasOwnProperty("Menus") && root_menu.Menus.length > 0) { 
      $("#menu li").append("<ul class='child-list' id='menu_" + root_menu.MenuId + "'>"); 
      for(var n = 0, m = root_menu.Menus.length; n<m; n++) { 
       var sub_menu = root_menu.Menus[n]; 
       if(sub_menu.hasOwnProperty("MenuId")) { 
        $("#menu_" + root_menu.MenuId).append("<li class='menu-child'><a href='#'>" + sub_menu.MenuName + "</a></li>"); 

       } 
      } 

     } 
$("#menu").append("</ul></li>"); 

    } 
} 
}); 

您可以從http://jsfiddle.net/JcU4G/9/這裏的孩子也有一個子兒檢查我的代碼。我如何從json文件中安排孩子和小孩？

Answer 1

，因爲你是通過循環和增加鋰元素，你可以簡單地使用。去年（）

$("#menu li").last().append("<ul class='child-list' id='menu_" + root_menu.MenuId + "'>"); 

這將追加子菜單右主菜單項目主菜單=）

編輯： 要添加其他子子菜單沿着這條線補充一下：

if(sub_menu.hasOwnProperty("Menus") && sub_menu.Menus.length > 0){ 
        $("#menu_" + root_menu.MenuId + " li").last().append("<ul class='child-list' id='menu_" + sub_menu.MenuId + "'>"); 
        for(var oo = 0, pp = sub_menu.Menus.length; oo<pp; oo++){ 
         var subsub_menu = sub_menu.Menus[oo]; 
         $("#menu_" + sub_menu.MenuId).append("<li></li>") 
        } 
        $("#menu_" + root_menu.MenuId + " li").last().append("</ul>"); 
       } 

當然

您現在必須整理樣式...以適當地顯示subsub_menu項目。 這裏是一個小提琴其中i分叉您的示例和剝離的風格吧：jsfiddle.net/HPNkq

考慮到你是編程新手我不想重寫整個代碼，而只是增加了一點，你已經以同樣的方式編碼。然而，我會通過定義一個函數來解決這個問題，該函數會提供一個菜單級別，如果某個項目具有子菜單，則會遞歸地再次調用自身。