使用JQuery从JSON数据构建动态子菜单？

我想从json数据为菜单项建立子菜单。

菜单

  <div class="subnav-fixed" id="menuContrainer" runat="server">
        <ul class="nav nav-pills">
           <li id="Li0"><a href="Default.aspx">Home </li>
           <li id="Li1"><a href="InitiativeGrid.aspx">Initiative</a></li>
           <li id="Li2"><a href="Reports.aspx">Reports</a></li>
           <li id="Li3"><a href="EditInitiative.aspx">Edit Initiatives</a></li>            
        </ul>
    </div>

JSON

data =
    "{"d":[
        {"__type":"Tableau_Reports:#CostReductionData",
            "ClientIdx":1,
            "GroupName":"HR",
            "ReportGroup":"1",
            "ReportHeight":"800",
            "ReportName":"Baseline Vs Active Employees",
            "ReportOrder":"0",
            "ReportUrl":"https://company.com/t/sga/views/HRReports/BaselineandActiveEmployees"
        },
        {"__type":"Tableau_Reports:#CostReductionData",
            "ClientIdx":1,
            "GroupName":"HR",
            "ReportGroup":"1",
            "ReportHeight":"800",
            "ReportName":"Level vs Direct Reports",
            "ReportOrder":"0",
            "ReportUrl":"https://company.com/t/sga/views/HRReports/LevelvsDirectReports"
        },
        {"__type":"Tableau_Reports:#Alixpartners.SGACostReductionData",
            "ClientIdx":1,
            "GroupName":"Finance",
            "ReportGroup":"2",
            "ReportHeight":"800",
            "ReportName":"Spans and Layers",
            "ReportOrder":"0",
            "ReportUrl":"https://company.com/t/sga/views/HRReports/SpansandControl"
        }]
    }"  

我想要像这样显示报告菜单项的子菜单

Home Initiative Reports Edit Initiative
                  |
                  HR- Baseline Vs Active Employees
                    - Level vs Direct Reports
                  |
                  Finance - Spans and Layers

我们如何用JQuery来做到这一点？

---

我不知道如何获取数据，但使用jquery添加HTML非常容易。 基本示例中，您使用$ .ajax（）来获取数据。 用你给定的HTML和JSON数据返回，你可能会这样做：

$(function() {
    $.ajax({
        url: "http://www.yourDomain.com/yourController/yourMethod",
        dataType: "json",
        type: "get",
        beforeSend: function(xhr, settings) {
            $("#Li2").find("ul").remove();
        },
        success: function(data, status, xhr) {
            if (data["d"]) {
                if (data["d"].length) {
                    var items = data["d"],
                        ul = $("<ul />").appendTo($("#Li2"));
                    for (x in items) {
                        var li = $("<li />").appendTo(ul);
                        li.append($("<a />", { href: items[x].ReportUrl, text: items[x].ReportName }));
                    }
                }
            }
        }
    })
})

或者如果JSON在你的JS中是一个变量，那么你只需使用$ .each（）和相同类型的setup：

$(function() {
    var $ul = $("<ul />").appendTo($("#Li2"));
    $.each(data.d, function(index, item) {
        var li = $("<li />").appendTo($ul);
        li.append($("<a />", { href: item.ReportUrl, text: item.ReportName }));
    })
})

而为了彻底，2：

$(function() {
    $.ajax({
        url: "http://www.yourDomain.com/yourController/yourMethod",
        dataType: "json",
        type: "get",
        beforeSend: function(xhr, settings) {
            $("#Li2").find("ul").remove();
        },
        success: function(data, status, xhr) {
            if (data["d"]) {
                if (data["d"].length) {
                    var ul = $("<ul />").appendTo($("#Li2"));
                    $.each(data.d, function(index, item) {
                        var li = $("<li />").appendTo(ul);
                        li.append($("<a />", { href: items[x].ReportUrl, text: items[x].ReportName }));
                    });
                }
            }
        }
    })
})

进一步阅读：

$阿贾克斯（）

$。每（）

。去掉（）

。附加（）

.appendTo（）

在jQuery中创建一个div元素

如何在jQuery中迭代JSON数据

---

试试这个逻辑

var html='<ul>';

$.each(data.d, function(i, item) {
    //alert(item.GroupName);
    html+='<li><a>'+item.GroupName+'</a></li>'
});

html+='</ul>';

链接地址: http://www.djcxy.com/p/83363.html

上一篇: Build dynamic sub menu from JSON data using JQuery?

下一篇: Click event is not working for dynamically added button