在 `load_node` 之后使用更新的 json 数据刷新 jstree

Question

我有一个 jstree 元素，当在 init_hpotree() 初始化时，它从名为 hpo_json 的 json 数组加载数据。然后在特定按钮上单击我将 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 数组已更新，但我不确定如何刷新树。一些SO 答案建议使用tree.jstree("refresh")，但我不确定具体在哪里。仅供参考，我使用的是jsTree - v3.3.7。

Answer 1

使用tree.redraw([full])：

重绘所有需要重绘的节点或可选 - 整个树

https://www.jstree.com/api/#/?f=redraw([full])

可能是这样的：

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[,%20callback])

加载一个节点（使用 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])

通过使用任何输入（子 DOM 元素、ID 字符串、选择器等）获取节点（或实际的 jQuery 扩展 DOM 节点）的 JSON 表示