用sql數據庫中的數據填充dijit菜單欄

我之前沒有用過jquery，ajax和json，但我想學習如何使用dojo和dijit來使用它。有很多教程，但很少有C＃與SQL數據庫示例。用sql數據庫中的數據填充dijit菜單欄

我已經創建了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>

我真的可以使用這個幫助。感謝所有我能得到的建議。
謝謝！ :)

親切的問候，
喬恩·哈康

來源

2014-02-08 Jon Haakon Ariansen

我想我會作出這樣的洞穴向下進入你從服務器接收的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/

來源

2014-02-09 16:04:40 Frode

用sql數據庫中的數據填充dijit菜單欄

回答

相關問題