如何从json文件创建菜单
How to create a menu from a json file
我有一个任务,从json对象创建一个水平菜单。我的json文件是
var data = [
{
"menu":[
{
"MenuId":1,
"MenuName":"Home",
"MenuLink":null,
"Action":null,
"Controller":null,
"ParentID":null,
"SortOrder":1,
"ModuleId":null,
"Menus":{
}
},
{
"MenuId":2,
"MenuName":"New Transaction",
"MenuLink":null,
"Action":null,
"Controller":null,
"ParentID":null,
"SortOrder":2,
"ModuleId":null,
"Menus":{
}
},
{
"MenuId":3,
"MenuName":"Portfolio",
"MenuLink":null,
"Action":null,
"Controller":null,
"ParentID":null,
"SortOrder":3,
"ModuleId":null,
"Menus":{
}
},
{
"MenuId":4,
"MenuName":"Analytics",
"MenuLink":null,
"Action":null,
"Controller":null,
"ParentID":null,
"SortOrder":4,
"ModuleId":null,
"Menus":{
}
},
{
"MenuId":5,
"MenuName":"Instructions",
"MenuLink":null,
"Action":null,
"Controller":null,
"ParentID":null,
"SortOrder":5,
"ModuleId":null,
"Menus":{
}
},
{
"MenuId":6,
"MenuName":"Data Upload",
"MenuLink":null,
"Action":null,
"Controller":null,
"ParentID":null,
"SortOrder":6,
"ModuleId":null,
"Menus":{
}
},
{
"MenuId":7,
"MenuName":"Administration",
"MenuLink":null,
"Action":null,
"Controller":null,
"ParentID":null,
"SortOrder":7,
"ModuleId":null,
"Menus":[
{
"MenuId":8,
"MenuName":"Masters",
"MenuLink":null,
"Action":null,
"Controller":null,
"ParentID":7,
"SortOrder":1,
"ModuleId":null,
"Menus":[
{
"MenuId":10,
"MenuName":"Currency",
"MenuLink":"/Currencies/Index",
"Action":"Index",
"Controller":"Currencies",
"ParentID":8,
"SortOrder":1,
"ModuleId":null,
"Menus":{
}
},
{
"MenuId":11,
"MenuName":"Country",
"MenuLink":"/Countries/Index",
"Action":"Index",
"Controller":"Countries",
"ParentID":8,
"SortOrder":2,
"ModuleId":null,
"Menus":{
}
}
]
},
{
"MenuId":9,
"MenuName":"User Management",
"MenuLink":null,
"Action":null,
"Controller":null,
"ParentID":7,
"SortOrder":2,
"ModuleId":null,
"Menus":{
}
}
]
}
]
}
];
我如何从这个json文件创建一个水平菜单?请帮我也写这个json数据的javascript。我在这里创建了一个示例http://jsfiddle.net/s4DeS/
举个简单的例子:http://jsfiddle.net/XecTZ/
var data = [{
"menu":[
{
"MenuId":1,
"MenuName":"Home",
"MenuLink":null,
"Action":null,
"Controller":null,
"ParentID":null,
"SortOrder":1,
"ModuleId":null,
"Menus":{
}
},
{
"MenuId":2,
"MenuName":"New Transaction",
"MenuLink":null,
"Action":null,
"Controller":null,
"ParentID":null,
"SortOrder":2,
"ModuleId":null,
"Menus":{
}
},
{
"MenuId":3,
"MenuName":"Portfolio",
"MenuLink":null,
"Action":null,
"Controller":null,
"ParentID":null,
"SortOrder":3,
"ModuleId":null,
"Menus":{
}
},
{
"MenuId":4,
"MenuName":"Analytics",
"MenuLink":null,
"Action":null,
"Controller":null,
"ParentID":null,
"SortOrder":4,
"ModuleId":null,
"Menus":{
}
},
{
"MenuId":5,
"MenuName":"Instructions",
"MenuLink":null,
"Action":null,
"Controller":null,
"ParentID":null,
"SortOrder":5,
"ModuleId":null,
"Menus":{
}
},
{
"MenuId":6,
"MenuName":"Data Upload",
"MenuLink":null,
"Action":null,
"Controller":null,
"ParentID":null,
"SortOrder":6,
"ModuleId":null,
"Menus":{
}
},
{
"MenuId":7,
"MenuName":"Administration",
"MenuLink":null,
"Action":null,
"Controller":null,
"ParentID":null,
"SortOrder":7,
"ModuleId":null,
"Menus":[
{
"MenuId":8,
"MenuName":"Masters",
"MenuLink":null,
"Action":null,
"Controller":null,
"ParentID":7,
"SortOrder":1,
"ModuleId":null,
"Menus":[
{
"MenuId":10,
"MenuName":"Currency",
"MenuLink":"/Currencies/Index",
"Action":"Index",
"Controller":"Currencies",
"ParentID":8,
"SortOrder":1,
"ModuleId":null,
"Menus":{
}
},
{
"MenuId":11,
"MenuName":"Country",
"MenuLink":"/Countries/Index",
"Action":"Index",
"Controller":"Countries",
"ParentID":8,
"SortOrder":2,
"ModuleId":null,
"Menus":{
}
}
]
},
{
"MenuId":9,
"MenuName":"User Management",
"MenuLink":null,
"Action":null,
"Controller":null,
"ParentID":7,
"SortOrder":2,
"ModuleId":null,
"Menus":{
}
}
]
}
]
}
];
for(var i = 0, j = data[0].menu.length; i<j; i++) {
var root_menu = data[0].menu[i];
if(root_menu.hasOwnProperty("MenuId")) {
$("#menu").append("<li>" + root_menu.MenuName + "</li>");
if(root_menu.hasOwnProperty("Menus") && root_menu.Menus.length > 0) {
$("#menu").append("<li><ul id='menu_" + root_menu.MenuId + "'>");
for(var n = 0, m = root_menu.Menus.length; n<m; n++) {
var sub_menu = root_menu.Menus[n];
if(sub_menu.hasOwnProperty("MenuId")) {
$("#menu_" + root_menu.MenuId).append("<li>" + sub_menu.MenuName + "</li>");
/* e.t.c but DONT REPEAT YOURSELF */
/* but if there is 50 levels- what a u going to do? */
/* look at recursive way */
}
}
$("#menu").append("</li></ul>");
}
}
}
如果你需要的话,你必须添加1,2,3级菜单,但最好的做法(DRY)是编写递归函数。
遍历数据:
var a = data[0].menu;
for(var i = 0; i < a.length; i++){
// Create menu components here
var menuId = a[i].MenuId;
// ...
}
我会说试试这样用jquery。
var Data = // your json object .
var x = eval('('+Data+')');
$.each(x,function(entryIndex, entry){
var menuId = entry['menu']['menuId'];
// and so on all the elements .
});
我不知道这是否对你有用。但值得一试。
相关文章:
- 使用php和javascript从kml文件创建高程图
- 如何在jquery mobile中使用json文件创建动态下拉菜单
- 是否可以在javascript中访问
src的文件创建时间
- 节点.js从 UTF8 文件创建十六进制缓冲区
- 我需要使用AngularJS从JSON文件创建HTML元素
- 在androidwebview中为本地文件创建脚本标记时出现问题
- 从js文件而不是xml文件创建关联数组
- 从外部xml文件创建标记
- 使用 JS 和 geojson 文件创建纽约市行政区的 d3 地图
- 情节:基于GeoJSON文件创建地图
- 从外部 JSON 文件创建 JavaScript 变量
- 使用 geometry.vertices 和 geometry.faces 从 .obj 文件创建网格
- 使用 JSON 文件创建购物清单
- 如何使用javascript或jquery在浏览器上获取文件创建日期
- 如何为 jpg 文件创建响应式视口,供用户缩放、滚动和点击
- 如何创建菜单项根据运行时值更改的 html 上下文菜单
- 尝试使用 jQuery 创建菜单,但我的代码不起作用
- 使用 AngularJS 从 JSON 文件创建菜单
- 如何使用相同的.dropit css文件创建具有不同属性的两个下拉菜单?
- 如何从json文件创建菜单