可折叠引导多级列表视图从数据库填充初学者 - Collapsable bootstrap multilevel listview populated from database for beginners

作为一名初级编码员，我可以使用一些帮助来理解构建从数据库填充的列表视图所涉及的内容，这些列表视图可以展开和折叠，提供更多信息，并为控件嵌入按钮。我想主要使用bootstrap和python或PHP并复制此:http://preview.iatistandard.org/index.php?url=http%3A//iati.oxfam.org.uk/xml/oxfamgb-lb.xml

类似问题的答案太高级了。有人可以请地图出的例子的基本组件和功能，至少和数据库脚本去哪里，他们做什么?谢谢!

这是你需要的DEMO

$('.collapse').on('shown.bs.collapse', function (e) {
        //Get the id of the collapsible which is opened
        var id = $(this).attr("id");
        //Set the minus icon as this collapsible is now opened
        $('a[href="#'+ id +'"]').find("span.glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
        //You know now which collapsible is clicked, so get the data for this id which is in attribute data-collapisbleId
         var collapsibleDataId = $(this).data("collapisbleId");
  //Now we have the id of the collapisble whihc we can use to get the deatails for this id, and then we will insert that into the detail section
        
    }).on('hide.bs.collapse', function (e) {
       var id = $(this).attr("id");
        $('a[href="#'+ id +'"]').find("span.glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
      var collapsibleDataId = $(this).data("collapisbleId");
     $.ajax({
         //Make hit to get the detials using ajax and on success of that insert the data in the  dic with id = $(this).attr("id"); whihc is current div
     });
    });

  <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Here I have just added the hardwired collapisbles, you have to make here loop to make these 
for  example. You got here the list of the collapisable heading and then you are making loop to make the collapisble
I have used here ASP.Net MVC as am not good in PHP or Python but the logic will go same here. Think as the below div are created using this loop
@(for var i= 0; i> Model.Count(); i++){
   <div>
    <a class="btn btn-link" role="button" data-toggle="collapse" href="#link@(i+1)" aria-expanded="false" aria-controls="collapseExample">
        <span class="glyphicon glyphicon-plus"></span> &nbsp;Link 1
    </a>
    <div class="collapse" id="link@(i+1)" data-collapisbleId="@Model.Id">
           //Detials section
    </div>
  </div>
} -->
<div>
    <a class="btn btn-link" role="button" data-toggle="collapse" href="#link1" aria-expanded="false" aria-controls="collapseExample">
        <span class="glyphicon glyphicon-plus"></span> &nbsp;Link 1
    </a>
    <div class="collapse" id="link1" data-collapisbleId="1">
        <!--Detials section-->
      Link 1
    </div>
</div>
<div>
    <a class="btn btn-link" role="button" data-toggle="collapse" href="#link2" aria-expanded="false" aria-controls="collapseExample">
        <span class="glyphicon glyphicon-plus"></span> &nbsp;Link 2
    </a>
    <div class="collapse" id="link2" data-collapisbleId="2">
   <!--Detials section-->
        <ul class="list-group">
            <li class="list-group-item">Cras justo odio</li>
            <li class="list-group-item">Dapibus ac facilisis in</li>
            <li class="list-group-item">Morbi leo risus</li>
            <li class="list-group-item">Porta ac consectetur ac</li>
            <li class="list-group-item">Vestibulum at eros</li>
        </ul>
    </div>
</div>

**Complete DEMO**
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
$(document).ready(function(){
 $('.collapse').on('shown.bs.collapse', function (e) {
        //Get the id of the collapsible which is opened
        var id = $(this).attr("id");
        //Set the minus icon as this collapsible is now opened
        $('a[href="#'+ id +'"]').find("span.glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
        //You know now which collapsible is clicked, so get the data for this id which is in attribute data-collapisbleId
         var collapsibleDataId = $(this).data("collapisbleId");
  //Now we have the id of the collapisble whihc we can use to get the deatails for this id, and then we will insert that into the detail section

    }).on('hide.bs.collapse', function (e) {
       var id = $(this).attr("id");
        $('a[href="#'+ id +'"]').find("span.glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
      var collapsibleDataId = $(this).data("collapisbleId");
     $.ajax({
         //Make hit to get the detials using ajax and on success of that insert the data in the  dic with id = $(this).attr("id"); whihc is current div
     });
    });
});
    </script>
</head>
<body>
<!-- Here I have just added the hardwired collapisbles, you have to make here loop to make these 
for  example. You got here the list of the collapisable heading and then you are making loop to make the collapisble
I have used here ASP.Net MVC as am not good in PHP or Python but the logic will go same here. Think as the below div are created using this loop
@(for var i= 0; i> Model.Count(); i++){
   <div>
    <a class="btn btn-link" role="button" data-toggle="collapse" href="#link@(i+1)" aria-expanded="false" aria-controls="collapseExample">
        <span class="glyphicon glyphicon-plus"></span> &nbsp;Link 1
    </a>
    <div class="collapse" id="link@(i+1)" data-collapisbleId="@Model.Id">
           //Detials section
    </div>
  </div>
} -->
<div>
    <a class="btn btn-link" role="button" data-toggle="collapse" href="#link1" aria-expanded="false" aria-controls="collapseExample">
        <span class="glyphicon glyphicon-plus"></span> &nbsp;Link 1
    </a>
    <div class="collapse" id="link1" data-collapisbleId="1">
        <!--Detials section-->
      Link 1
    </div>
</div>
<div>
    <a class="btn btn-link" role="button" data-toggle="collapse" href="#link2" aria-expanded="false" aria-controls="collapseExample">
        <span class="glyphicon glyphicon-plus"></span> &nbsp;Link 2
    </a>
    <div class="collapse" id="link2" data-collapisbleId="2">
   <!--Detials section-->
        <ul class="list-group">
            <li class="list-group-item">Cras justo odio</li>
            <li class="list-group-item">Dapibus ac facilisis in</li>
            <li class="list-group-item">Morbi leo risus</li>
            <li class="list-group-item">Porta ac consectetur ac</li>
            <li class="list-group-item">Vestibulum at eros</li>
        </ul>
    </div>
</div>
</body>
</html>