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