vanillatree
Version:
Standalone tree view library
80 lines (67 loc) • 1.43 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<link rel="stylesheet" href="./vanillatree.css">
<script src="./vanillatree.js"></script>
</head>
<body>
<main></main>
<footer></footer>
<script>
const main = document.querySelector('main');
const info = document.querySelector('footer');
const tree = new VanillaTree( main, {
contextmenu: [{
label: 'Hey',
action: function(id) {
alert('Hey ' + id);
}
}, {
label: 'Blah',
action: function(id) {
alert('Blah ' + id);
}
}]
});
tree.add({
label: 'Label A',
id: 'a',
opened: true
});
tree.add({
label: 'Label B',
id: 'b'
});
tree.add({
label: 'Label A.A',
parent: 'a',
id: 'a.a',
opened: true,
selected: true
});
tree.add({
label: 'Label A.A.A',
parent: 'a.a'
});
tree.add({
label: 'Label A.A.B',
parent: 'a.a'
});
tree.add({
label: 'Label B.A',
parent: 'b'
});
main.addEventListener('vtree-open', function(evt) {
info.innerHTML = evt.detail.id + ' is opened';
});
main.addEventListener('vtree-close', function(evt) {
info.innerHTML = evt.detail.id + ' is closed';
});
main.addEventListener('vtree-select', function(evt) {
info.innerHTML = evt.detail.id + ' is selected';
});
</script>
</body>
</html>