JsTree Node Expand / Collapse

Question

Today I came across a great jstree jQuery UI plug. In a word - excellent! It is easy to use, easy to wear and does what it says on the box. The only thing I could not understand yet was that in my application I want only one node to expand at any given time. that is, when the user clicks the + button and extends the node, any previously extended node should be seamless. I need to do this in part to prevent the div container for a fairly long tree view from creating an ugly scrollbar when overflowing, and also to avoid the "selection overload" for the user.

I assume there is a way to do this, but the good, but rather brief jstree documentation did not help me determine the correct way to do this. I would really appreciate any help.

Answer 1

jsTree is great, but its documentation is pretty tight. In the end, I realized that this is a solution for everyone who works in this topic.

First, you need to bind the open_node event to the tree in question. Something along the lines

$("tree").jstree({"themes":objTheme,"plugins":arrPlugins,"core":objCore}). bind("open_node.jstree",function(event,data){closeOld(data)}); 

i.e. you set up a treeview instance and then bind the open_node event. Here I call the closeOld function to perform the required task - close any other node that may be open. The function looks like this:

 function closeOld(data) { var nn = data.rslt.obj; var thisLvl = nn; var levels = new Array(); var iex = 0; while (-1 != thisLvl) { levels.push(thisLvl); thisLvl = data.inst._get_parent(thisLvl); iex++; } if (0 < ignoreExp) { ignoreExp--; return; } $("#divElements").jstree("close_all"); ignoreExp = iex; var len = levels.length - 1; for (var i=len;i >=0;i--) $('#divElements').jstree('open_node',levels[i]); } 

This will correctly handle collapsing all other nodes regardless of the nesting level of the node that has just been expanded.

A brief explanation of the steps taken

• First, we take a step back up the tree structure until we reach the top level of the node (-1 in jstree speak), making sure that we record every node ancestor encountered in the process in the level array
• Then we collapse all nodes in the treeview
• Now we are going to redeploy all the nodes in the levels array. At the same time, we do not want this code to run again. To stop this, we set the global variable ignoreEx to the number of nodes in the levels
• Finally, we go through the nodes in the levels and expand each of them.

Answer 2

The above answer will build the tree again and again. In the code below, node and crash will open, which are already open, and it still does not create a tree.

 .bind("open_node.jstree",function(event,data){ closeOld(data); }); 

Function

and closeOld contains:

 function closeOld(data) { if($.inArray(data.node.id, myArray)==-1){ myArray.push(data.node.id); if(myArray.length!=1){ var arr =data.node.id+","+data.node.parents; var res = arr.split(","); var parentArray = new Array(); var len = myArray.length-1; for (i = 0; i < res.length; i++) { parentArray.push(res[i]); } for (var i=len;i >=0;i--){ var index = $.inArray(myArray[i], parentArray); if(index==-1){ if(data.node.id!=myArray[i]){ $('#jstree').jstree('close_node',myArray[i]); delete myArray[i]; } } } } } 

Answer 3

Another example for jstree 3.3.2. It uses underscore lib, feel free to adapt the solution to jquery or vanillla js.

 $(function () { var tree = $('#tree'); tree.on('before_open.jstree', function (e, data) { var remained_ids = _.union(data.node.id, data.node.parents); var $tree = $(this); _.each( $tree .jstree() .get_json($tree, {flat: true}), function (n) { if ( n.state.opened && _.indexOf(remained_ids, n.id) == -1 ) { grid.jstree('close_node', n.id); } } ); }); tree.jstree(); }); 

Answer 4

I achieved this by simply using the "before_open" event and close all nodes, my tree had only one tho level, not sure if you need it.

 $('#dtree').on('before_open.jstree', function(e, data){ $("#dtree").jstree("close_all"); });