patternfly-bootstrap-treeview
Version:
Tree View for Twitter Bootstrap
60 lines (52 loc) • 1.53 kB
HTML
<html>
<head>
<title>Bootstrap Tree View</title>
<link href="./libs/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="./css/bootstrap-treeview.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Bootstrap Tree View - DOM Tree</h1>
<br/>
<div class="row">
<div class="col-sm-12">
<label for="treeview"></label>
<div id="treeview"/>
</div>
</div>
</div>
<script src="./libs/jquery/jquery.js"></script>
<script src="./js/bootstrap-treeview.js"></script>
<script type="text/javascript">
function buildDomTree() {
var data = [];
function walk(nodes, data) {
if (!nodes) { return; }
$.each(nodes, function (id, node) {
var obj = {
id: id,
text: node.nodeName + " - " + (node.innerText ? node.innerText : ''),
tags: [node.childElementCount > 0 ? node.childElementCount + ' child elements' : '']
};
if (node.childElementCount > 0) {
obj.nodes = [];
walk(node.children, obj.nodes);
}
data.push(obj);
});
}
walk($('html')[0].children, data);
return data;
}
$(function() {
var options = {
bootstrap2: false,
showTags: true,
levels: 5,
data: buildDomTree()
};
$('#treeview').treeview(options);
});
</script>
</body>