How to update jstree node values without reload

Question

I have a jstree that I created with the following code:

$('#mytree').jstree({"core": { "data" : value
                             , "themes" : { "dots": false
                                          , "icons": false }
                             }
                    }
                   );

I can rebuild it with new data by this code:

$('#mytree').jstree(true).settings.core.data = new_data;
$('#mytree').jstree(true).refresh();

but it can be expensive when you have a lot of nodes. What I would like to achieve is that I would like update the value of the elements (i.e. the node.text part) without rebuilding the whole tree. I get the new values via websocket in one message (the complete JSON string that will be the new_data) but the structure is not changing. How can I do that? Thank you!

Answer 1

What you need is not refresh() but redraw() thus the code is

$('#mytree').jstree(true).settings.core.data = new_data;
$('#mytree').jstree(true).redraw(true);

You can find the functions in the jstree API.

As per zmirc suggestion, in v3.1 use:

$('#mytree').jstree(true).settings.core.data = new_data;
$('#mytree').jstree(true).refresh();

Answer 2

for deleting the node and reload tree

 $('#mytree').jstree(true).refresh();

for those who need to redraw without restart the tree use

jQuery('#data').jstree(true).refresh(true);

Answer 3

$('#mytree').jstree(true).refresh(); is working, but in my case it causes thread leak. every refresh adds one more thread

Answer 4

You can refresh node by this

$('#treeView').jstree(true).refresh_node("node_id_here")

Answer 5

I load data via an url, so my refresh part looks like:

$('#groupTree').jstree(true).settings.core.data.url = get_group_url();