Question

我有一个jstree元素，当在hpo_json初始化时，该元素从称为init_hpotree()的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表示形式

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

1 个答案: