0

jsonファイルから水平メニューを作成しました。しかし、子とサブ子を作成することはできません。管理者の子を作成すると、家の子になります。私のjavascriptファイルは

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":{
                    }
                }
            ]
        }
    ]
}
];
$(function() {
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><a href="#" class="parent-menu">' + root_menu.MenuName + '</a>');
        if(root_menu.hasOwnProperty("Menus") && root_menu.Menus.length > 0) {
            $("#menu li").append("<ul class='child-list' 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 class='menu-child'><a href='#'>" + sub_menu.MenuName + "</a></li>");

                }
            }

        }
 $("#menu").append("</ul></li>");

    }
}
});

http://jsfiddle.net/JcU4G/9/から私のコードを確認できます。ここでは、子にもサブ子があります。jsonファイルから子とサブ子をどのように配置できますか？

4

1 に答える 1

1

ループして li 要素をメイン メニューに追加しているので、単純に .last() を使用できます。

$("#menu li").last().append("<ul class='child-list' id='menu_" + root_menu.MenuId + "'>");

これにより、サブメニューが右側のメイン メニュー項目に追加されます =)

編集: 別のサブサブメニューを追加するには、次の行に沿って何かを追加します:

if(sub_menu.hasOwnProperty("Menus") && sub_menu.Menus.length > 0){
                    $("#menu_" + root_menu.MenuId + " li").last().append("<ul class='child-list' id='menu_" + sub_menu.MenuId + "'>");
                    for(var oo = 0, pp = sub_menu.Menus.length; oo<pp; oo++){
                        var subsub_menu = sub_menu.Menus[oo];
                        $("#menu_" + sub_menu.MenuId).append("<li></li>")
                    }
                    $("#menu_" + root_menu.MenuId + " li").last().append("</ul>");
                }

もちろん、スタイリングをまっすぐにする必要があります... subsub_menu アイテムを適切に表示します。ここに私があなたの例をフォークしてスタイルを取り除いたフィドルがあります：jsfiddle.net/HPNkq

あなたがプログラミングに慣れていないことを考えると、コード全体を書き直したくはありませんでしたが、すでにコーディングしていたのと同じ方法で少しだけ追加しました。ただし、メニューレベルを構築し、アイテムにサブメニューがある場合に再帰的にそれ自体を呼び出す関数を定義することにより、このような問題に取り組みます。

于 2013-02-27T09:28:52.620 に答える