Question

之前我没有和jquery，ajax和json一起工作过，但是我想学习如何使用dojo和dijit来使用它。有许多教程，但很少有c＃与sql数据库示例。

我用我的数据库中的dijit菜单栏数据创建了一个json输出，如下所示：

[{"MenuItemId":1,"MenuName":"Root","Tooltip":"Root","IsParent":true,"ParentId":0,"IsVisible":false,"SortIndex":null},
{"MenuItemId":3,"MenuName":"Blogg","Tooltip":"Min Blogg","IsParent":false,"ParentId":1,"IsVisible":true,"SortIndex":1000},
{"MenuItemId":4,"MenuName":"Administrasjon","Tooltip":"Viser Administrasjon","IsParent":true,"ParentId":1,"IsVisible":true,"SortIndex":10000},
{"MenuItemId":5,"MenuName":"DropMenu","Tooltip":"Drop menu","IsParent":true,"ParentId":1,"IsVisible":true,"SortIndex":9000},
{"MenuItemId":6,"MenuName":"Menuitem1","Tooltip":"Menuitem1","IsParent":false,"ParentId":5,"IsVisible":true,"SortIndex":9001},
{"MenuItemId":9,"MenuName":"Menuitem2","Tooltip":"Menuitem2","IsParent":false,"ParentId":5,"IsVisible":true,"SortIndex":9002}]

我想将这些数据绑定到dijit菜单栏，但我还没弄清楚如何做到这一点。这是我到目前为止所做的代码。我一直在来回尝试，但我还没有设法从我试图得到的json数据中获取数据。

以下是我尝试从json数据输出中获取数据的示例。该示例正在尝试在控制台视图中写入数据，但我想填充dijit manybar：

<script>
    require([
        "dijit/MenuBar",
        "dijit/PopupMenuBarItem",
        "dijit/Menu",
        "dijit/MenuItem",
        "dijit/DropDownMenu",
        "dojo/dom",
        "dojo/request",
        "dojo/json",
        "dojo/_base/array",
        "dojo/domReady!"                
    ], function(MenuBar, PopupMenuBarItem, Menu, MenuItem, DropDownMenu, dom, request, JSON, arrayUtil) {
        console.log('hello world');

        // Results will be displayed in resultDiv
        var resultDiv = dom.byId("resultDiv");

        // Request the JSON data from the server
        request.get("/api/Menu", {
            // Parse data from JSON to a JavaScript object
            handleAs: "json"
        }).then(function(data) {
            // Display the data sent from the server
            var html = "";
            var pMenuBar = new MenuBar({});
            var pSubMenu = new DropDownMenu({});
            console.log('data : ' + data.toString());
            arrayUtil.forEach(data.items, function(item, i) {
                console.log(item[0].value);
                //console.log('item :' + item.name + '\r\n');
                //console.log('value : ' + item.value + '\r\n');
                    });
                        //html += "<dt>" + item.name +
                //    "</dt><dd>" + item.value +
                //    " (" + (typeof item.value) + ")</dd>";
            //});

                    //resultDiv.innerHTML = html;
            //pMenuBar.placeAt("wrapper");
            //pMenuBar.startup();
        },
            function(error) {
                // Display the error returned
                resultDiv.innerHTML = error;
            });
    });
</script>

我需要的是如何迭代json数据以填充dijit菜单栏的示例。

<body class="claro">
    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'sidebar', gutters:true, liveSplitters:true" id="borderContainer">
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true, region:'leading'" style="width: 300px;">
        <div id="markup" style="width: 300px; height: 300px"></div>
        </div>
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true, region:'center'">
        <div id="wrapper"></div>
        <div id="resultDiv"></div>
        </div>
    </div>
</body>

我真的可以在这个上使用一些帮助。感谢我能得到的所有建议谢谢！ :)

亲切的问候，
乔恩哈康

Answer 1

我想我会做一个递归函数，它会深入到你从服务器收到的JSON结构中，并在整个过程中构建菜单项。

令人讨厌的是，菜单栏本身的项目与属于菜单栏的子菜单中的项目之间存在细微差别。菜单栏需要dijit/PopupMenuBarItem和dijit/MenuBarItem个对象，而弹出菜单本身则需要dijit/PopupMenuItem和dijit/MenuItem。

以下是一个例子：

function recursiveMakeMenuItem(data, id, inMenuBar) {

    // Get the item itself and its children (if any)
    var item = arrayUtil.filter(data, function(i){return i.MenuItemId==id;})[0],
        subs = arrayUtil.filter(data, function(i){return i.ParentId==id;}),
        widget = null, menu = null;

    if(subs.length) {
        // This item has children, so we need to make both an item that
        // triggers the a submenu (differentiating between items in the
        // menu bar and items in menus) and the submenu itself.
        widget = inMenuBar ? new PopupMenuBarItem() : new PopupMenuItem();
        menu   = new Menu();
        widget.set("popup", menu);
        // We then recursively dig deeper to generate the sub menus.
        arrayUtil.forEach(subs, function(item) {
            menu.addChild(recursiveMakeMenuItem(data, item.MenuItemId));
        });
    }
    else {
        // No children, but again we need to differentiate between items
        // in the menu bar and items in menus.
        widget = inMenuBar ? new MenuBarItem() : new MenuItem();       
    }
    widget.set("label", item ? item.MenuName : "ERROR id "+id);
    return widget;
}

在您的代码中，当您从服务器接收数据时，您会调用此方法。例如，如果您希望ParentId 0的单个项目成为顶级菜单栏项，则可以执行以下操作：

request.post("/echo/json/", {
        handleAs: "json"
}).then(function(data) {
    var pMenuBar = new MenuBar({region: "top"});
    pMenuBar.addChild( recursiveMakeMenuItem(data.items, 1, true) );

    dijitRegistry.byId("borderContainer").addChild(pMenuBar);
    pMenuBar.startup();
});

或者，如果使用ParentId 1的所有内容都应该是顶级项目：

request.post("/echo/json/", {
        handleAs: "json"
}).then(function(data) {
    var pMenuBar = new MenuBar({region: "top"});
    arrayUtil.forEach(data.items, function(i) {
        if(i.ParentId !== 1) return;
        pMenuBar.addChild(recursiveMakeMenuItem(data.items, i.MenuItemId, true));
    });

    dijitRegistry.byId("borderContainer").addChild(pMenuBar);
    pMenuBar.startup();
});

以下是一个示例小提琴：http://fiddle.jshell.net/2Gpkd/1/

用来自sql数据库的数据填充dijit菜单栏

1 个答案: