1

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

4

2 回答 2

4

我不确定您是如何获取数据的，但是使用 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 }));
                    });
                }
            }
        }
    })
})

延伸阅读：

于 2013-06-03T18:18:31.540 回答
0

试试这个逻辑

var html='<ul>';

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

html+='</ul>';
于 2013-06-03T18:16:29.443 回答