jstree Example - Simple, requires jQuery only, Fully working!!!, found 30Nov15
Found from Google Search, continue & modify this example, by keeping more folders & <a>href links. Make a good example & Save on HD. You can make a useful file, such Extensions list, a Chrome session for Notes & Add to your main Notes page. Add it, to your notes page.
by tacman1123
HTML
<script src="http://static.jstree.com/3.0.0-beta3/assets/dist/jstree.min.js"></script>
<link rel="stylesheet" href="http://static.jstree.com/3.0.0-beta3/assets/dist/themes/default/style.min.css">
<button>Select a node</button> <br><br>
<p id='p1'>The below tree generated by json, no html provided. The below div was empty (see in html-part), filled by javascript-json-data.
<br>Note: dnd & contextmenu -- plugins are only activated, on first-tree, not the below.
</p>
<div id='using_json_2'></div>
<div id='log'></div>
CSS
body { background-color: beige; font: 16px Calibri; }
#p1 { box-shadow: 0 0 3px purple; padding: 5px;
background-color: rgb(225, 235, 245); }
JavaScript
// Taken from:
// http://js-tutorial.com/jstree-provides-interactive-trees-497
// read other, alternative formats, mentioned.
$('#using_json_2').jstree({
'core': {
'multiple': false,
'data' : [
{ "id" : "ajson1", "parent" : "#", "text" : "Simple root node", 'data': {'id': '3'} },
{ "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
{ "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
{ "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
]
}
})
.on('changed.jstree', function (e, data) {
var i, j, r = [];
for(i = 0, j = data.selected.length; i < j; i++) {
let selectedNode = data.instance.get_node(data.selected[i]).text;
(selectedNode.data);
r.push(data.instance.get_node(data.selected[i]).text);
}
}
)
.on('create_node.jstree', (e, node, parentId, position) => {
console.warn(e.type, node);
console.warn(node.parent, parentId);
// parentId is null, not sure why!
console.log('e', e, e.currentTarget);
});