treeVD is tool which helps to work with jsTree
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.3/themes/default/style.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.3/jstree.min.js"></script>Then you can simply download and include treeVD.js
<script src="res/treeVD.js"></script><div id="container"></div>let treeParams = {
name: 'treeName',
data: [
{ 'text' : 'Root node', 'children' : [
{ 'text' : 'Child node 1' },
{ 'text' : 'Child node 2' }
]
}
]};
let treeContainer = $('#container');
let treeItem;
function treeItemSelectEvent(selectedItem){
treeItem = selectedItem;
console.log('Selected item text: ', selectedItem.text);
console.log('Selected item ID: ', selectedItem.id);
}
let tree = treeVD.draw(treeContainer, treeParams, treeItemSelectEvent);treeVD.createBranch(tree, {label: 'newBranchLabel', id: treeItem.id});or add new branch to root
treeVD.createBranch(tree, {label: 'newBranchLabel'});treeVD.setEditedBranch(tree, {label: 'editedBranchLabel', item: treeItem} );treeVD.deleteBranch(tree, treeItem.id);Unlike setEditedBranch function, editBranchData will edit branchs just which have value ( branchLabel: branchValue )
treeVD.editBranchData(treeName, oldVar, newVar);treeVD.destroy(tree);