使用JSON构建嵌套列表

时间:2012-03-27 09:40:55

标签: jquery json

我有以下创建菜单的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级深度,因此需要灵活。任何想法建议和代码示例将不胜感激。感谢。

3 个答案:

答案 0 :(得分:0)

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

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

比使用嵌套的.each()函数解析json

答案 1 :(得分:0)

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

答案 2 :(得分:0)

当我需要从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”。递归处理任何级别的菜单。