读书人

怎么正常遍历下面这个json字符串实现

发布时间: 2014-01-22 00:03:39 作者: rapoo

如何正常遍历下面这个json字符串,实现三层菜单
数据为
var _menus = { 'menus': [{'menuid': '1','icon': 'icon-img','menuname': '我的快捷导航',
'menus': [{'menuid': '11','menuname': '我的工作台','icon': 'icon-home','url': 'DeskTop.aspx'}
]},
{'menuid': '8', 'icon': 'icon-app', 'menuname': '我的工具',
'menus': [{'menuid': '80','icon': 'icon-new2','menuname': '个人考勤',
'menus': [{'menuid': '801','menuname': '我的考勤','icon': 'icon-log','url': '/Manage/Attend/WorkAttendAdd.aspx?type=1'},
{'menuid': '802','menuname': '我的考勤记录','icon': 'icon-new1','url': '/Manage/Attend/WorkAttendList.aspx?type=1'}
]
}
]
}
]
};

下面是遍历代码,如果下面的红字改为:child,下面的代码就能正确遍历,而改为现在的menus,就不行。不知道为什么。有没有更好的方法呢。

$.each(_menus.menus, function (i, n) {
var menulist = '';
menulist += '<ul class="navlist">';
$.each(n.menus, function (j, o) {
menulist += '<li><div ><a ref="' + o.menuid + '" href="#" rel="' + o.url + '" ><span class="icon ' + o.icon + '" > </span><span class="nav">' + o.menuname + '</span></a></div> ';

if (o.child && o.child.length > 0) {
console.log(o);
//li.find('div').addClass('icon-arrow');

menulist += '<ul class="third_ul">';
$.each(o.child, function (k, p) {
menulist += '<li><div><a ref="' + p.menuid + '" href="#" rel="' + p.url + '" ><span class="icon ' + p.icon + '" > </span><span class="nav">' + p.menuname + '</span></a></div> </li>';


});
menulist += '</ul>';
}

menulist += '</li>';
});
menulist += '</ul>';

[解决办法]
问题楼上几位朋友都说了.这里给个建议,仅供参考:
给你的每个menu加多一个属性MenuPid,一级菜单的MenuPid默认设置为0,然后通过MenuPid去关联其对应的子菜单.也就是说把它的深度层级变为1,我想这样的话,你后台输出应该也要容易很多.前端处理相对应的也容易很多.让它的结构变成类似这个样子:

var _menus = [
{
"menuid": '1',
"menuPid": 0,
"icon": 'icon-img',
"menuname": '我的快捷导航'

},
{
"menuid": '11',
"menuPid": 11,
"menuname": '我的工作台',
"icon": 'icon-home',
"url": 'DeskTop.aspx'

}
]
仅供参考

读书人网 >JavaScript

热点推荐