Обновите jstree после `load_node` с обновленными данными json

У меня есть элемент jstree, который загружает данные из массива json с именем hpo_json при инициализации в init_hpotree(). Затем при нажатии определенной кнопки я передаю массив json (hpo_json) вызову ajax, получаю обновленный массив, а затем повторно инициализирую jstree. Все работает абсолютно нормально.

hpo_json = [...]
function init_hpotree() {
    jstree_hpo = $('#jstree_hpo').jstree({
        'core' : {
            'data' : [hpo_json]
        }
    });
}

function destroy_hpotree() {
    $("#jstree_hpo").jstree("destroy");    
}

$('button.btnAdd').click(() => {
    destroy_hpotree();
    ajax_call(hpo_json) -> update -> hpo_json
    init_hpotree();
});

Но мне также нужно обновить содержимое массива json (hpo_json) и развернуть дерево при нажатии на определенный узел. Поэтому я отредактировал свою функцию инициализации следующим образом:

function init_hpotree() {
    jstree_hpo = $('#jstree_hpo')
    .on('load_node.jstree', function(e, data) {
        ajax call -> update -> hpo_json
    })
    .jstree({
        'core' : {
            'data' : [hpo_json]
        }
    });
}

Массив hpo_json обновлен, но я не знаю, как обновить дерево. В некоторых ответах ТАК предлагается использовать tree.jstree("refresh"), но я не уверен, где именно. К вашему сведению, я использую jsTree - v3.3.7.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
1 675
1

Ответы 1

Используйте tree.redraw([full]) :

перерисовывает все узлы, которые нужно перерисовать или опционально - все дерево

https://www.jstree.com/api/#/?f=redraw([полный])

Может вот так:

function init_hpotree() {
    jstree_hpo = $('#jstree_hpo').jstree({
        'core' : {
            'data' : [hpo_json]
        }
    });
    $('#jstree_hpo').jstree.redraw();
}

Для функции load_node (obj [, callback]) примерно так:

https://www.jstree.com/api/#/?f=load_node(obj%20[,%20обратный вызов])

загружает узел (извлекает его дочерние элементы, используя настройку core.data). Несколько узлов могут быть переданы с помощью массива.

 function load_node(node) {
      node.core.data = [hpo_json];

      jstree_hpo = $('#jstree_hpo').jstree.load_node(
         node,
         // Callback executed after node loading event.
         () => {
            $('#jstree_hpo').jstree.redraw();
         }
      );
  }

Получите свой узел get_node (obj [, as_dom]):

https://www.jstree.com/api/#/?f=get_node(obj%20[,%20as_dom])

получить JSON-представление узла (или фактического расширенного узла DOM jQuery), используя любой ввод (дочерний элемент DOM, строку идентификатора, селектор и т. д.)

Спасибо, но не могли бы вы указать, где именно я должен добавить эту строку?

DhiwaTdG 15.03.2019 19:09

Мне нужно обновить (или перерисовать) мое дерево после события load_node .

DhiwaTdG 15.03.2019 19:13

Другие вопросы по теме