Как обновить значения узла jstree без перезагрузки

У меня есть jstree, который я создал со следующим кодом:

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

Я могу восстановить его с новыми данными с помощью этого кода:

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

но это может быть дорого, когда у вас много узлов. Чего я хотел бы добиться, так это того, что я хотел бы обновить значение элементов (т.е. часть node.text) без перестройки всего дерева. Я получаю новые значения через websocket в одном сообщении (полная строка JSON, которая будет new_data), но структура не меняется. Как я могу это сделать? Спасибо!


jstree
person Gabor Meszaros    schedule 23.10.2014    source источник

Ответы (7)


arrow_upward
27
arrow_downward

Вам нужно не refresh(), а redraw(), поэтому код

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

Вы можете найти функции в jstree API.

Согласно предложению zmirc, в v3.1 используйте:

$('#mytree').jstree(true).settings.core.data = new_data;
$('#mytree').jstree(true).refresh();
person Gabor Meszaros    schedule 07.11.2014
comment
В версии 3.1.0 это не работает, если redraw(true) не заменить на refresh(). - person zmirc; 28.04.2015
comment
Я пытался использовать это, и, похоже, это работает, но состояние объектов, похоже, не обновляется. Можно ли заставить новое нарисованное дерево соответствовать параметрам состояния, указанным в new_data? - person OganM; 20.11.2015

arrow_upward
2
arrow_downward

для удаления узла и перезагрузки дерева

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

для тех кому нужно перерисовать без перезагрузки дерево пользуйтесь

jQuery('#data').jstree(true).refresh(true);
person baaroz    schedule 26.01.2017

arrow_upward
2
arrow_downward

у меня сработало: $('#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']
                                }
                            ]

                     }
                });

            }
person Aziz Nortojiev    schedule 18.03.2020

arrow_upward
1
arrow_downward

Вы можете обновить узел этим

$('#treeView').jstree(true).refresh_node("node_id_here")
person Atif    schedule 21.01.2019

arrow_upward
0
arrow_downward

$('#mytree').jstree(true).refresh(); работает, но в моем случае это вызывает утечку потока. каждое обновление добавляет еще один поток

person Shlomi Aharoni    schedule 04.04.2018

arrow_upward
0
arrow_downward

Я загружаю данные через URL-адрес, поэтому моя часть обновления выглядит так:

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

arrow_upward
-1
arrow_downward

  1. $('#YourJSTREE').jstree("destroy").empty();
  2. Установить новые данные
  3. $('#YourJSTREE').jstree(true).refresh();
person Kiều Đức Giang    schedule 23.06.2021