========
add css and Javascripts references, then a blank div:
...
<link rel="stylesheet" href="../css/tree.css">
<script src="https://github.com/paulocanedo/jtTreeJs/releases/download/0.9.0/jtTreeJs.min.js"></script>
<div id="tree">
<!-- empty DIV to draw tree -->
</div>your root node where will hold every else nodes:
var rootNode = new JusTo.ui.Node("root", -1);create a new node:
var milk = new JusTo.ui.Node("Milk", 1); //value, id
rootNode.push(milk);add a subnode:
milk.push(new JusTo.ui.Node("subnode", 2)); //value, ida node with ajax/json subnode
var node = new JusTo.ui.Node("subnode", 3, "./sample.json"); //value, id, json URLto listen (de)selection:
rootNode.events.selectionChanged.push(function(node) {
if(node.selected) {
console.log("node selected", node.id);
} else {
console.log("node deselected", node.id);
}
});to listen node opened:
rootNode.events.openStateChanged.push(function(node) {
console.log("opened");
});JusTo.ui.NodeFilter.single; //can select any node
JusTo.ui.NodeFilter.all; //can select any node - multiple
JusTo.ui.NodeFilter.leafSingle; //can select only leaf
JusTo.ui.NodeFilter.leaf; //can select only leaf - multiple
JusTo.ui.NodeFilter.children; //select auto recursively from node until leaf
//e.g.:
JusTo.ui.Node.canSelect = JusTo.ui.NodeFilter.single;to select all nodes (it will select recursively from the node)
document.getElementById("selectAllButton").addEventListener("click", function(evt) {
rootNode.selectAll();
});npm startopen: http://localhost:8080/demo/index.htm to test it
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent