Question

我需要使用ul和li代码构建动态菜单。必须使用我从Web服务器获得的以下JSON构建菜单。任何想法如何使用基于此结构的jQuery实现这样的菜单？

var data = [
  {
    "MenuId": "4fde524c-9f8e-4fc4-a7c1-aea177090299",
    "ParentMenuId": null,
    "Title": "Home",
    "Icon": "fa fa-home",
    "DisplayOrder": 10,
    "MenuAction": "/Home/Index",
    "Menus": []
  },
  {
    "MenuId": "172f657e-6bbd-4cca-9ed6-a372dba3c9dc",
    "ParentMenuId": null,
    "Title": "Maintenance",
    "Icon": "fa fa-home",
    "DisplayOrder": 20,
    "MenuAction": "Maintenance",
    "Menus": [
      {
        "MenuId": "f7661f0c-7b0c-4967-bd68-6f39387d7cb8",
        "ParentMenuId": "172f657e-6bbd-4cca-9ed6-a372dba3c9dc",
        "Title": "Users",
        "Icon": "fa fa-home",
        "DisplayOrder": 10,
        "MenuAction": "/Maintenance/Users",
        "Menus": []
      },
      {
        "MenuId": "90130291-db76-4c46-8180-73c5a4056eae",
        "ParentMenuId": "172f657e-6bbd-4cca-9ed6-a372dba3c9dc",
        "Title": "Roles",
        "Icon": "fa fa-home",
        "DisplayOrder": 20,
        "MenuAction": "/Maintenance/Roles",
        "Menus": []
      }
    ]
  },
  {
    "MenuId": "867eee51-7702-45b4-9427-ea3bedec4c3e",
    "ParentMenuId": null,
    "Title": "Reports",
    "Icon": "fa fa-home",
    "DisplayOrder": 30,
    "MenuAction": "Reports",
    "Menus": [
      {
        "MenuId": "2905febe-e310-4bc8-abe1-6ec00093458e",
        "ParentMenuId": "867eee51-7702-45b4-9427-ea3bedec4c3e",
        "Title": "Report 1",
        "Icon": "fa fa-home",
        "DisplayOrder": 10,
        "MenuAction": "/Reports/Report1",
        "Menus": []
      },
      {
        "MenuId": "66d9d009-6e1f-4c2b-bf53-fba23bf5e133",
        "ParentMenuId": "867eee51-7702-45b4-9427-ea3bedec4c3e",
        "Title": "Report 2",
        "Icon": "fa fa-home",
        "DisplayOrder": 20,
        "MenuAction": "/Reports/Report2",
        "Menus": []
      }
    ]
  },
  {
    "MenuId": "5d3b2b07-8db8-44f4-97b4-30da0bb3cb88",
    "ParentMenuId": null,
    "Title": "Lookup",
    "Icon": "fa fa-home",
    "DisplayOrder": 40,
    "MenuAction": "Lookup",
    "Menus": [
      {
        "MenuId": "dba0985c-2cdb-4302-a405-fdd883c6b37a",
        "ParentMenuId": "5d3b2b07-8db8-44f4-97b4-30da0bb3cb88",
        "Title": "Logs",
        "Icon": "fa fa-home",
        "DisplayOrder": 10,
        "MenuAction": "/Lookup/Logs",
        "Menus": []
      },
      {
        "MenuId": "72344388-6e53-4626-93af-2f74c563f734",
        "ParentMenuId": "5d3b2b07-8db8-44f4-97b4-30da0bb3cb88",
        "Title": "Resources",
        "Icon": "fa fa-home",
        "DisplayOrder": 20,
        "MenuAction": "/Lookup/Resources",
        "Menus": []
      },
      {
        "MenuId": "e4dd9b30-b968-4a80-9284-1ca1c89e2eb0",
        "ParentMenuId": "5d3b2b07-8db8-44f4-97b4-30da0bb3cb88",
        "Title": "Lookup Tables",
        "Icon": "fa fa-home",
        "DisplayOrder": 30,
        "MenuAction": "/Lookup/LookupTables",
        "Menus": []
      }
    ]
  }
];

http://jsfiddle.net/z4wgaovq/10/

Answer 1

这是：

$.each(data, function(i) {
  //console.log(i);
  item = data[i].Title;
  console.log(item);
  if (data[i].Menus.length) {
    $('#menu').append('<li class="has-sub" id="' + data[i].MenuId + '">' + item + '</li>');
    $('#' + data[i].MenuId).append('<ul></ul>');
    sub_item = data[i].Menus;
    for (j = 0; j < data[i].Menus.length; j++) {
      console.log(j);

      $('#' + data[i].MenuId + ' ul').append('<li>' + sub_item[j].Title + '</li>');

    }
  } else {
    $('#menu').append('<li>' + item + '</li>');
  }

});

演示：http://jsfiddle.net/8mmy1aqu/你可以将它清理一下（我已经定义了一些变量，但没有使用过它，并且稍后使用它（sub_item）匆忙... :) ）

Answer 2

有一些问题：

您正在<li>

<div>

您的<div>标识为#menu，必须为menu
您应该将其全部包含在$(document).ready();
您在空元素上使用$.append()。尽可能避免这种情况。

这样做可以解决问题。

此外，使用items[items.length]='html'代替items.push()可以加快您的代码。

另外，请注意您拥有的代码不是JSON：这是一个常规的Javascript对象。

jQuery构建基于JSON的ul-li导航

2 个答案: