2016-05-17 57 views
0

以下代碼將顯示ReportGroups的列表,但在選擇它時不會在每個ReportGroup下顯示列表項。動態引導程序列表未顯示嵌套列表

type: "POST", 
    url: "wsReports.asmx/GetReports", 
    contentType: "application/json; charset=utf-8", 
    dataType: "json", 
    success: function (list) { 
     var text = ''; 
     text += "<ul id='newList' class='nav navbar-nav side-nav' data-toggle='dropdown'>"; 
     $.each(list.d, function() { 
      text += "<li><a href='#'>" + this.ReportGroup + "</a>"; 
      text += "<ul id='rptList' class='collapse'>" 
      $.each(this.Reports, function() { 
       text += "<li><a href='#'>" + this.ReportName + "</a></li>"; 
      }); // end of each rptList 
      text += "</ul></li>"; 
     }); // end of each newList 
     text += "</ul>"; 

     $('#divSideBar').append(text); 

    }, //end of success 

如果我在rptList中創建class = collapse.in,那麼我可以看到列表,但ReportGroups不會摺疊。

+0

正在返回什麼類型的數據? [你編碼你的數據?](http://stackoverflow.com/questions/1219860/html-encoding-in-javascript-jquery)如果不是一個引號或特殊字符可能會搞亂輸出。無論如何,你可以在[JS.Fiddle](https://jsfiddle.net)中重現該問題? – crazymatt

回答

0

我沒有正確顯示html來創建dropdowms。

 type: "POST", 
    url: "wsReports.asmx/GetReports", 
    contentType: "application/json; charset=utf-8", 
    dataType: "json", 
    success: function (list) { 
     // http://tutorialspalace.com/bootstrap-navbar/ 
     // how to add the classes to the list. 
     var text = ''; 
     text += "<ul id='newList' class='nav navbar-nav side-nav'>"; 
     $.each(list.d, function() { 
      text += "<li class='dropdown'><a href='#' class='dropdown-toggle' data-toggle='dropdown'>" + this.ReportGroup + "<b class='caret'></b></a>"; 
      text += "<ul id='rptList' class='dropdown-menu'>" 
      $.each(this.Reports, function() { 
       text += "<li><a href='#' onclick='GetReport(" + this.ReportID +")'>" + this.ReportName + "</a></li>"; 
      }); // end of each rptList 
      text += "</ul></li>"; 
     }); // end of each newList 
     text += "</ul>"; 

     $('#divSideBar').append(text); 

    }, //end of success