使用jquery ajax数据响应引导多级展开折叠

Question

我需要下面这个使用 JSON 数据响应，请帮助我...提前感谢

实际上我需要使用 jquery ajax 的 JSON 数据响应的多级展开折叠...

我是 ajax 新手，所以请使用 expnad collapse 插件帮助处理 json 数据..

所有级别的数据都应该从下面的 json 文件中获取，

$.ajax({ 类型：“获取”， 网址：“即/getcachedata”， 内容类型：“应用程序/json”， 数据类型：“json”， 异步：假， 成功：函数（数据）{ $('#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">
    	<div class="row">
    		<div class="col-md-3">
        	    <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> 
    		</div>
    	</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);
  }
});