Question

我有以下创建菜单的JSON：

{
    "menu": {
        "id": "organisation-201",
        "class": "list",
        "content": {
            "menuitem": [{
                "text": "New Journal Entry",
                "title": "New Journal Entry",
                "href": "/Organisations/201/NewJournalEntry",
                "liClass": "",
                "icon": "icon test"
            }, {
                "text": "View People",
                "title": "View People",
                "href": "/Organisations/201/People",
                "liClass": "",
                "icon": "icon test"
            }, {
                "text": "Edit",
                "title": "Edit",
                "href": "/Organisations/201/Edit",
                "liClass": "sep",
                "icon": "icon test"
            }]
        }
    }
}

然后使用jQuery我们构建它:(注意：我使用$.ajax调用json但在此处未显示！）

// Build the menu
var ul = $("<ul/>").attr("id", data.menu.id).addClass(data.menu.class);

// For each menu item
$.each(data.menu.content.menuitem, function () {
    var li = $("<li/>").appendTo(ul).addClass(this.liClass);
    var anchor = $("<a/>").appendTo(li).attr("href", this.href).attr("title", this.title);

    var span = $("<span/>").appendTo(anchor).addClass(this.icon).html(this.text)
});

好的，我正在尝试做的是构建一个嵌套的菜单结构，例如我可以标记为：

<ul>
    <li>
        <a href="#">Link 1</a>
    </li>
    <li>
        <a href="#">Link 2</a>
        <ul>
            <li>
                <a href="#">Link 2.1</a>
            </li>
            <li>
                <a href="#">Link 2.2</a>
            </li>
        </ul>
    </li>
</ul>

最好的方法是什么？请记住，它们可能并不总是一个子菜单...我已经考虑过在菜单项中添加额外的参数，但嵌套菜单可能是2-3级深度，因此需要灵活。任何想法建议和代码示例将不胜感激。感谢。

Answer 1

你应该在每个menuitem对象中添加一个名为ex“content”的属性，该属性可能包含其他子菜单项

{"menu": {
    "content" : {
        "menuitem": [{
            "text": "New Journal Entry",
            ...
            "content" : {
                "menuitem":[{
                    "text": "Submenu"
                    ..
                            }]
                        }
                    ]}
                }
        }
}}

比使用嵌套的.each（）函数解析json

Answer 2

Here's what i made。它解析多个级别（演示中最多3个，但实际上可以做得更多）

{"menu": {
    //attributes for the <ul>
    "attributes": {               
        "id": "organisation-201",
        "class": "list"
    },
    //<li>'s
    "items": [{     
        //<li> attributes               
        "attributes": {},
        //<a> attributes
        "link": {
            "text": "New Journal Entry",
            "title": "New Journal Entry",
            "href": "/Organisations/201/NewJournalEntry"
        },
        //<li> icon
        "icon": "icon test",
        //submenu of the same structure
        "menu": ...
    }]
}}

这个结构可由这个紧凑的脚本解析：

var menu = (function menuBuilder(menu) {
    var $menu = $('<ul/>').attr(menu.attributes);
    $.each(menu.items, function(itemIndex, itemData) {
        var $item = $('<li/>').attr(itemData.attributes).appendTo($menu);
        var $link = $('<a/>').appendTo($item);            
        $.each(itemData.link, function(linkKey, linkVal) {
            if (linkKey === 'text') {$link.text(linkVal);} 
            else {$link.attr(linkKey, linkVal);}
        });
        if (itemData.hasOwnProperty('menu')) {
            $item.append(menuBuilder(itemData.menu));
        }
    });
    return $menu;
}(json.menu));

$('body').append(menu);

Answer 3

当我需要从javscript中的数据创建动态html时，我喜欢制作隐藏的“模板”div，使用函数用项目的数据填充模板，然后使用jquery，类似{{1}构建实际的html。所以对于你的菜单，我会尝试这样的事情。

$real_list.append( $item_template.html() );

JS

<div id="menu_level_template" style="display_none">
  <ul class="menu_level">

  </ul>
</div>

<div id="menu_item_template" style="display_none">
  <li>
    <a href=""></a>
  </li>
</div>

当你使用$ element.html（）时，它会获取内容，而不是标记本身，因此永远不会复制模板的“divs”。递归处理任何级别的菜单。

使用JSON构建嵌套列表

3 个答案: