Bootstrap Treeview 2
HTML
<script src="https://rawgit.com/jonmiles/bootstrap-treeview/master/public/js/bootstrap-treeview.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-sm-4">
<div id="treeview-searchable" class="treeview"></div>
</div>
</div>
<div id="tree"></div>
CSS
body {
margin: 30px;
}
.treeview .list-group-item {
cursor: pointer;
}
.treeview span.indent {
margin-left: 20px;
margin-right: 12px;
}
.treeview span.icon {
width: 122px;
margin-right: 5px;
}
.treeview .node-disabled {
color: silver;
cursor: not-allowed;
}
JavaScript
//https://github.com/jonmiles/bootstrap-treeview
//https://raw.githubusercontent.com/jonmiles/bootstrap-treeview/master/public/js/bootstrap-treeview.js
//https://rawgit.com/jonmiles/bootstrap-treeview/master/public/js/bootstrap-treeview.js
//https://raw.githubusercontent.com/jonmiles/bootstrap-treeview/master/public/css/bootstrap-treeview.css
//https://rawgit.com/jonmiles/bootstrap-treeview/master/public/css/bootstrap-treeview.css
// Dependencies
//Bootstrap v3.3.4 (>= 3.0.0)
//jQuery v2.1.3 (>= 1.9.0)
var tree = [{
text: "Parent 1",
nodes: [{
text: "Child 1",
value : "1",
nodes: [{
text: "Grandchild 1",
value : "2"
}, {
text: "Grandchild 2",
value : "3"
}]
}, {
text: "Child 2"
}]
}, {
text: "Parent 2"
}, {
text: "Parent 3"
}, {
text: "Parent 4"
}, {
text: "Parent 5"
}];
function getTree() {
// Some logic to retrieve, or generate tree structure
return tree;
}
var $searchableTree = $('#treeview-searchable').treeview({
data: getTree(),
});
var search = function(e) {
var pattern = $('#input-search').val();
var options = {
ignoreCase: $('#chk-ignore-case').is(':checked'),
exactMatch: $('#chk-exact-match').is(':checked'),
revealResults: $('#chk-reveal-results').is(':checked')
};
var results = $searchableTree.treeview('search', [pattern, options]);
var output = '<p>' + results.length + ' matches found</p>';
$.each(results, function(index, result) {
output += '<p>- ' + result.text + '</p>';
});
$('#search-output').html(output);
}
$('#btn-search').on('click', search);
$('#input-search').on('keyup', search);
$('#btn-clear-search').on('click', function(e) {
$searchableTree.treeview('clearSearch');
$('#input-search').val('');
$('#search-output').html('');
});
function aaa(){
$('#treeview-searchable').treeview('getNode', 0);
}
aaa();