0

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/

4

3 に答える 3

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) です。

于 2013-02-26T12:44:52.427 に答える
0

このように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 .
});

これがうまくいくかどうかはわかりません。しかし、試してみる価値があります。

于 2013-02-26T12:21:44.227 に答える
0

データを反復処理します。

var a = data[0].menu;
for(var i = 0; i < a.length; i++){
    // Create menu components here
    var menuId = a[i].MenuId;
    // ...
}
于 2013-02-26T12:02:15.067 に答える