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!

score 32 · Accepted Answer · edited May 07 '15 at 17:19

32

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();

edited May 07 '15 at 17:19

Kriggs

3,731
1
15
23

answered Nov 07 '14 at 00:16

Gabor Meszaros

1,335
1
15
25

5

With v 3.1.0 it doesn't seem to work, unless redraw(true) is replaced with refresh(). – zmirc Apr 28 '15 at 19:07
3

I have been trying to use this and it seems to work but the state of the objects does not seem to be updated. Is it possible to force the newly drawn tree to conform to state options provided in the new_data? – OganM Nov 20 '15 at 01:05

score 2 · Answer 2 · answered Jan 26 '17 at 11:14

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);

answered Jan 26 '17 at 11:14

baaroz

19,119
7
37
47

score 2 · Answer 3 · answered Mar 18 '20 at 05:57

worked for me: $('#structureRows').jstree("destroy").empty();

function CreateStructureTree(jsonData)
        {
            $('#structureRows').jstree("destroy").empty(); 
            $('#structureRows').jstree
                ({
                    'core' : {
                        'data':
                            [

                                jsonData,
                                {
                                'id' : 'node_2',
                                'text' : 'Root node with options',
                                'state' : { 'opened' : true, 'selected' : true },
                                'children' : [ { 'text' : 'Child 1' }, 'Child 2']
                                }
                            ]

                     }
                });

            }

score 1 · Answer 4 · answered Jan 21 '19 at 14:33

1

You can refresh node by this

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

answered Jan 21 '19 at 14:33

Atif

278
1
3
16

score 0 · Answer 5 · answered Apr 04 '18 at 10:46

0

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

answered Apr 04 '18 at 10:46

Shlomi Aharoni

482
7
9

score 0 · Answer 6 · answered Mar 28 '19 at 08:31

0

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

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

answered Mar 28 '19 at 08:31

cwhisperer

1,478
1
32
63

score -2 · Answer 7 · edited Jun 23 '21 at 21:21

-2

$('#YourJSTREE').jstree("destroy").empty();
Set new data
$('#YourJSTREE').jstree(true).refresh();

edited Jun 23 '21 at 21:21

Brian Tompsett - 汤莱恩

5,753
72
57
129

answered Jun 23 '21 at 02:37

Kiều Đức Giang

1

How to update jstree node values without reload

7 Answers7

Linked