<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Tree View</title>
<!-- <link href="./bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet"> -->
<link href="./css/bootstrap.min.css" rel="stylesheet">
<style>
#treeview12 ul{
margin-bottom:0px;
}
</style>
</head>
<body>
<div class="container">
<h1>Bootstrap Tree View</h1>
<br>
<div class="row">
<hr>
<h2>Data</h2>
<div class="col-sm-4">
<h2>JSON Data</h2>
<div id="treeview12" class="" style='height:150px;overflow:auto;border:1px solid #ddd;'></div>
</div>
<div class="col-sm-4">
<h2></h2>
<div id="treeview13" class=""></div>
</div>
<div class="col-sm-4">
<h2></h2>
<div id="treeview14"></div>
</div>
</div>
<br/>
<br/>
<br/>
<br/>
</div>
<script src="./js/jquery.min.js"></script>
<script src="./js/bootstrap-treeview.js"></script>
<script type="text/javascript">
$(function() {
var json = '[' +
'{' +
'"text": "Parent 1","id":"di1111",' +
'"nodes": [' +
'{' +
'"text": "Child 1",' +
'"nodes": [' +
'{' +
'"text": "Grandchild 1"' +
'},' +
'{' +
'"text": "Grandchild 2"' +
'}' +
']' +
'},' +
'{' +
'"text": "Child 2"' +
'}' +
']' +
'},' +
'{' +
'"text": "Parent 2"' +
'},' +
'{' +
'"text": "Parent 3"' +
'},' +
'{' +
'"text": "Parent 4"' +
'},' +
'{' +
'"text": "Parent 5"' +
'}' +
']';
var $tree = $('#treeview12').treeview({
data: json,
onNodeSelected:function(event, data) {
alert(data.id);
}
});
});
</script>
</body>
</html>
ZIP