根据 Json 文件创建完整菜单
Create full menu based on Json file
我有一个功能齐全的菜单(静态),因为我要去 post,我想根据我从 json 文件中得到的内容复制它,我的意思是,创建基于菜单在 json 文件上。
这是我想要的菜单: html:
<div class="menu-container" >
<div class="menu">
<nav class="navbar-toggleable-md">
<div id="toggle" class="navbar-toggler"><a></a>
</div>
</nav>
<ul id="my_styles" class="rowcenter" >
<li>
<a role="button" class="button button4 menu-button" ><i role="button" class="icon-ambientais fs1 icon menu-button"></i><span class="button-text rowcenter menu-button">menu1</span></a>
<ul class="menu-list">
<li>
<a href="#" style="color: #f38e31"><i style="color: white" class="icon-ambientais fs1"></i>submenu</a>
<ul>
<li><a href="javascript:void(0)" [routerLink]="['/doc/link']" [routerLinkActive]="['router-link-active']">{{ 'submenu</a></li>
<li><a href="javascript:void(0)" [routerLink]="['/doc/link2']" [routerLinkActive]="['router-link-active']">submenu</a></li>
<li><a href="javascript:void(0)" [routerLink]="['/documentos/AbreviaturaQld']" [routerLinkActive]="['router-link-active']">{{ 'Imagens' | translate }}</a></li>
</ul>
</li>
<li>
<a href="#" style="color: #f38e31"><i style="color: white" class="icon-gestao-ambient fs1"></i>submenu3</a>
<ul>
<li><a href="javascript:void(0)" [routerLink]="['/doc2/link2']" [routerLinkActive]="['router-link-active']">submenu2</a></li>
<li><a href="javascript:void(0)" [routerLink]="['/doc2/link2']" [routerLinkActive]="['router-link-active']">submenu2</a></li>
<li><a href="javascript:void(0)" [routerLink]="['/doc2/link2']" [routerLinkActive]="['router-link-active']">submenu2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
我有 javascript 让它工作。 我正在寻找一些帮助,因为我无法弄明白..
我找到了那个例子,但我不能让它看起来像我需要的。 https://www.codeproject.com/Articles/311758/Building-Menu-from-JSON (将 json obj 传递给 json 文件)
但我不能让它像我的菜单一样工作.. 如果我改变,例如,<ul> to <ul class="bla">
在这个菜单上,它会中断。
然后我发现:Creating a Menu from JSON
但没有成功..
这是我的尝试代码: 在 html 我只是打电话给
我的打字稿文件: .ts
ngOnInit() {
this._menu.getMenu()
.subscribe( res => {
let data = res;
console.log(data);
var getMenuItem = function (itemData) {
var item = $("<li>")
.append(
$("<a>", {
href: itemData.link,
html: itemData.name
}));
if (itemData.sub) {
var subList = $("<ul>");
$.each(itemData.sub, function () {
subList.append(getMenuItem(this));
});
item.append(subList);
}
return item;
};
var $menu = $("#menu");
$.each(data.menu, function () {
$menu.append(
getMenuItem(this)
);
});
$menu.menu();
});
}
以前有人做过这样的事吗?
如果你们中有人有一个包含一个菜单项和子菜单的工作示例,即使没有 img,我将不胜感激。
谢谢。
好的,我找到了解决方案! 完成所有 css 和 html 后,我刚刚得到 JSON 文件以这种方式排列:
this._menu.getMenu()
.subscribe( res => {
let data = res;
console.log(data);
this.arr = data;
this.arr = (<any>Object).values(data);
});
然后,在 html 我刚刚选择了菜单和子菜单名称/链接/图标,并将它们添加到已经制作的标签中:
<li *ngFor="let item of arr[0]; let i = index;">
<a role="button" class="button button4 menu-button" ><i role="button" class={{item.class}}></i><span class="button-text rowcenter menu-button">{{item.name}}</span></a>
<ul class="menu-list" *ngIf=item.sub>
<li *ngFor="let sub of item.sub; let j = index;">
<a href="#" style="color: #f38e31"><i style="color: white" class={{item.sub[j].class}}></i>{{item.sub[j].name}}</a>
<ul *ngFor="let smn of sub.submenu; let x = index;">
<li><a href="javascript:void(0)" [routerLink]="[smn.routerlink]" [routerLinkActive]="['router-link-active']">{{smn.name}}</a></li>
</ul>
</li>
</ul>
</li>
这是我用过的JSON:
{
"menu": [
{
"name": "Menu Name",
"link": "link",
"class": "icon-ambientais fs1 icon menu-button",
"sub": [{
"name": "SubMenuTitle1",
"link": "link",
"class": "icon-ambientais fs1",
"submenu":[{
"name": "SubMenu1",
"routerlink": "/link/Qld"
},{
"name": "SubMenu2",
"routerlink": "/link/eQld"
},{
"name": "SubMenu3",
"routerlink": "/link/aQld"
}
]
},
{
"name": "SubMenuTitle2",
"link": "link",
"class": "icon-gestao-ambient fs1",
"submenu":[{
"name": "SubMenu1",
"routerlink": "/link2/oQld"
},{
"name": "SubMenu2",
"routerlink": "/doc/eQld"
}
]
}
]
}
}
希望对未来的人有所帮助