首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

怎么正常遍历下面这个json字符串,实现三层菜单

2014-01-22 
如何正常遍历下面这个json字符串,实现三层菜单数据为 var _menus { menus: [{menuid: 1,icon:

如何正常遍历下面这个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 + '" >&nbsp;</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 + '" >&nbsp;</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'

}
]
仅供参考

热点排行