如何从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

考虑到你是编程新手我不想重写整个代码，而只是增加了一点，你已经以同样的方式编码。然而，我会通过定义一个函数来解决这个问题，该函数会提供一个菜单级别，如果某个项目具有子菜单，则会递归地再次调用自身。