Maison > Article > interface Web > Exemple détaillé d'utilisation de BootStrap TreeView
Exemple détaillé d'utilisation de BootStrap TreeView
- PHPzoriginal
- 2018-05-14 14:56:064597parcourir
Cet article présente principalement en détail les exemples d'utilisation de BootStrap TreeView, qui ont une certaine valeur de référence. Les amis intéressés peuvent s'y référer et espérer aider tout le monde.
[Recommandations vidéo associées : Tutoriel Bootstrap]
<html>
<head>
<title></title>
<link href="/Scripts/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="/Scripts/bootstrap/css/bootstrap-treeview.css" rel="stylesheet">
<script src="/Scripts/bootstrap/js/jquery.js" type="text/javascript"></script>
<script src="/Scripts/bootstrap/js/bootstrap-treeview.js" type="text/javascript"></script>
</head>
<body>
<p id="tree"></p>
<input type="button" id="btn" value="查询" />
<script type="text/javascript">
$(function () {
function getTree() {
// Some logic to retrieve, or generate tree structure
var data = [{
text: "p1",
nodes: [{ text: "p1-1", id: '00001', nodeId: '00001' }, { text: "p1-2", id: '00002' }, { text: "p1-3", id: '00003' }, { text: "p1-4", id: '00004', nodes: [{ text: 'p1-1-1', id: '00005'}]}]
}]
return data;
}
var obj = {};
obj.text = "123";
$('#tree').treeview({
data: getTree(), // data is not optional
levels: 5,
multiSelect: true
});
$("#btn").click(function (e) {
var arr = $('#tree').treeview('getSelected');
alert(JSON.stringify(arr));
for (var key in arr) {
alert(arr[key].id);
}
})
})
</script>
</body>
</html>Code spécifique pour la fenêtre pop-up + menu arborescent
<html>
<head>
<title></title>
<link href="/Scripts/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="/Scripts/bootstrap/css/bootstrap-treeview.css" rel="stylesheet">
<script src="/Scripts/bootstrap/js/jquery.js" type="text/javascript"></script>
<script src="/Scripts/bootstrap/js/bootstrap.js" type="text/javascript"></script>
<script src="/Scripts/bootstrap/js/bootstrap-treeview.js" type="text/javascript"></script>
</head>
<body>
<p id="c"></p>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal"
data-target="#myModal">
开始演示模态框
</button>
<!-- 模态框（Modal） -->
<p class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<p class="modal-dialog">
<p class="modal-content">
<p class="modal-header">
<button type="button" class="close"
data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
模态框（Modal）标题
</h4>
</p>
<p class="modal-body">
<p id="tree"></p>
</p>
<p class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">关闭
</button>
<button type="button" class="btn btn-primary" id="btn">
提交更改
</button>
</p>
</p><!-- /.modal-content -->
</p><!-- /.modal -->
</p>
<script type="text/javascript">
$(function () {
function getTree() {
// Some logic to retrieve, or generate tree structure
var data = [{
text: "p1",
nodes: [{ text: "p1-1", id: '00001', nodeId: '00001' }, { text: "p1-2", id: '00002' }, { text: "p1-3", id: '00003' }, { text: "p1-4", id: '00004', nodes: [{ text: 'p1-1-1', id: '00005'}]}]
}]
return data;
}
var obj = {};
obj.text = "123";
$('#tree').treeview({
data: getTree(), // data is not optional
levels: 5,
multiSelect: true
});
$("#btn").click(function (e) {
var arr = $('#tree').treeview('getSelected');
for (var key in arr) {
c.innerHTML = c.innerHTML + "," + arr[key].id;
}
})
})
</script>
</body>
</html> Recommandations associées :
Présentation et utilisation du plug-in treeview dans bootstrap
JS contrôle la sélection des nœuds de TreeView
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn