作为一名初级编码员，我可以使用一些帮助来理解构建从数据库填充的列表视图所涉及的内容，其中行可以展开和折叠，提供更多信息，带有用于控件的嵌入式按钮？我想主要使用bootstrap和python或PHP并复制它：http://preview.iatistandard.org/index.php?url=http%3A//iati.oxfam.org.uk/xml/oxfamgb-lb.xml
类似问题的答案太高级了。有人可以至少绘制出示例的基本组件和功能，数据库脚本的位置以及它们的作用是什么？谢谢！
答案 0 :(得分：0)
以下是您需要的演示
$('.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> 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> 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> 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> 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> 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> 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>