javascript - 如何从 json 文件创建菜单

Question

<分区>

Answer 1

举个简单的例子: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)是编写递归函数。