引導複式水平展開摺疊與jQuery的ajax數據響應

Question

我需要這個下面使用JSON數據響應，請幫我...提前感謝

其實我需要的多層次使用jQuery阿賈克斯擴大與JSON數據響應崩潰...

我是新的AJAX，請與expnad崩潰插件JSON數據幫助..

所有級別的數據應該像下面的JSON文件中獲取，

 
$.ajax({ 
         type : "GET", 
         url : "viz/getcachedata", 
         contentType : "application/json", 
         dataType : "json", 
         async : false, 
         success : function(data) { 
          $('#menulistitem1').append(data); 
         } 

         }); 

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/> 
 
    <style type="text/css"> 
 
     .menu .accordion-heading { position: relative; } 
 
    .menu .accordion-heading .edit { 
 
     position: absolute; 
 
     top: 8px; 
 
     right: 30px; 
 
    } 
 
    .menu .area { border-left: 4px solid #f38787; } 
 
    .menu .equipamento { border-left: 4px solid #65c465; } 
 
    .menu .ponto { border-left: 4px solid #98b3fa; } 
 
    .menu .collapse.in { overflow: visible; } 
 
     </style> 
 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 
    \t <div class="row"> 
 
    \t \t <div class="col-md-3"> 
 
     \t  <div class="menu"> 
 
        <div class="accordion"> 
 
         <!-- Áreas --> 
 
         <div class="accordion-group"> 
 
          <!-- Área --> 
 
          <div class="accordion-heading area"> 
 
           <a class="accordion-toggle" data-toggle="collapse" href="#area1">Área #1</a> 
 
       
 
           
 
          </div><!-- /Área --> 
 
       
 
          <div class="accordion-body in collapse" id="area1" style="height: auto;"> 
 
           <div class="accordion-inner"> 
 
            <div class="accordion" id="equipamento1"> 
 
             <!-- Equipamentos --> 
 
       
 
             <div class="accordion-group"> 
 
              <div class="accordion-heading equipamento"> 
 
               <a class="accordion-toggle" data-parent="#equipamento1-1" data-toggle="collapse" href="#ponto1-1">Equipamento #1-1</a> 
 
       
 
               
 
              </div><!-- Pontos --> 
 
       
 
              <div class="accordion-body in collapse" id="ponto1-1" style="height: auto;"> 
 
               <div class="accordion-inner"> 
 
                <div class="accordion" id="servico1"> 
 
                 <div class="accordion-group"> 
 
                  <div class="accordion-heading ponto"> 
 
                   <a class="accordion-toggle" data-parent="#servico1-1-1" data-toggle="collapse" href="#servico1-1-1">Ponto 
 
                   #1-1-1</a> 
 
       
 
                   
 
                  </div><!-- Serviços --> 
 
       
 
                  <div class="accordion-body in collapse" id="servico1-1-1" style="height: auto;"> 
 
                   <div class="accordion-inner"> 
 
                    <ul class="nav nav-list"> 
 
                     <li> 
 
                      <a href="#"><i class="icon-chevron-right"> 
 
                      </i> Serviço 
 
                      #1-1-1-1</a> 
 
                     </li> 
 
       
 
                     <li> 
 
                      <a href="#"><i class="icon-chevron-right"> 
 
                      </i> Serviço 
 
                      #1-1-1-2</a> 
 
                     </li> 
 
       
 
                     <li> 
 
                      <a href="#"><i class="icon-chevron-right"> 
 
                      </i> Serviço 
 
                      #1-1-1-3</a> 
 
                     </li> 
 
                    </ul> 
 
                   </div> 
 
                  </div><!-- /Serviços --> 
 
                 </div> 
 
                </div> 
 
               </div> 
 
              </div><!-- /Pontos --> 
 
             </div><!-- /Equipamentos --> 
 
            </div> 
 
           </div> 
 
          </div> 
 
         </div> 
 
        </div><!-- /accordion --> 
 
       </div> 
 
    \t \t </div> 
 
    \t </div> 
 
    </div>

Answer 1

可能是這樣的代碼對您有用：

$.ajax({ 
    type: "GET", 
    url: "viz/getcachedata", 
    contentType: "application/json", 
    dataType: "json", 
    async: false, 
    success: function(data) { 
    //may be your data like that 
    var responce = { 
     areas: [{ 
     name: "Areaa1", 
     equipamento: [{ 
      name: "Eeequipamento11" 
     }, { 
      name: "Eeequipamento12" 
     }] 
     }, { 
     name: "Areaa2", 
     equipamento: [{ 
      name: "Eeequipamento21" 
     }, { 
      name: "Eeequipamento22" 
     }] 
     }, { 
     name: "Areaa3", 
     equipamento: [{ 
      name: "Eeequipamento31" 
     }, { 
      name: "Eeequipamento32" 
     }] 
     }] 
    } 
    var html = '<div class="accordion"><div class="accordion-group">'; 

    //loop for areas 
    responce.areas.forEach(function(val, key) { 
     html += '<div class="accordion-heading area"><a class="accordion-toggle" data-toggle="collapse" href="#' + val.name + '">' + val.name + '</a></div>'; 
     html += '<div class="accordion-body collapse" id="' + val.name + '" style="height: auto;"><div class="accordion-inner">'; 
     console.log(val.equipamento); 
     html += '<div class="accordion" id="equipamento1"><div class="accordion-group">'; 
     val.equipamento.forEach(function(equip, equipkey) { 
     html += '<div class="accordion-heading equipamento"><a class="accordion-toggle" data-parent="#equipamento1-1" data-toggle="collapse" href="#' + equip.name + '">' + equip.name + '</a></div><div class="accordion-body collapse" id="' + equip.name + '" style="height: auto;"><div class="accordion-inner">dfdsfsdf</div></div>'; 
     }); 
     html += '</div></div>'; 
     html += '</div></div>'; 
    }); 
    html += '</div></div>'; 
    $('#menulistitem1').html(html); 
    } 
});