菜单

  <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做到这一点？

Answer 1

我不确定你是如何获取数据的，但使用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()相同的类型设置：

$(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 }));
                    });
                }
            }
        }
    })
})

进一步阅读：

Answer 2

尝试这个逻辑

var html='<ul>';

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

html+='</ul>';

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

菜单

JSON

2 个答案: