如何在完整的 jstree 重载事件上绑定回调函数？答案

【问题标题】：How do I bind a callback function on the complete jstree reload event?如何在完整的 jstree 重载事件上绑定回调函数？
【发布时间】：2020-09-25 03:38:37
【问题描述】：

我有一个按钮，点击后会重新加载（重新发送 AJAX 请求）jsTree。

这是我的示例配置代码：

treeContainer.bind("loaded.jstree", function () {
    alert("the tree is loaded");
}).jstree(config);

我遇到的问题是，一旦单击“重新加载”按钮第二次、第三次等次，我就没有显示警报（包装在回调函数中）。我是否使用了错误的 jstree 状态事件？

总而言之，我希望每次单击“重新加载”按钮时都执行一个 jsTree 回调函数。

我目前正在使用 jsTree 1.0-rc1 (rev. 191)。

【问题讨论】：

标签： javascript jquery jstree

【解决方案1】：

在构建新树之前销毁树也可以。

treeContainer.jstree("destroy");
treeContainer.bind("loaded.jstree", function () {
    alert("the tree is loaded");
}).jstree(config);

【讨论】：

谢谢。这很简单，而且它是我可以开始工作的唯一方法，这让我非常高兴。

【解决方案2】：

将此添加到核心：

        reopen : function () {
            var _this = this;
            if(this.data.core.to_open.length) {
                $.each(this.data.core.to_open, function (i, val) {
                    _this.open_node(val, false, true); 
                });
            }
            this.__callback({});
            this.reopened();
        },

请注意，只有 this.reopened 被添加到已经存在的重新打开方法中。现在创建重新打开的方法：

        reopened : function () {
            this.__callback();
        },

现在将新的重新打开方法绑定到您的树选择器

}).bind("reopened.jstree", function (e,data) {
        alert("i am refreshed...");
    });

小心，因为这个警告消息也会在树加载完成时被调用。无论如何更好，因为您现在可以在树刷新时进行回调！

希望对大家有所帮助！

【讨论】：

【解决方案3】：

我知道这是一个老问题，但我在 jsTree 3.3.4 中遇到了同样的问题。有效的解决方案是：

treeContainer.bind("refresh.jstree", function (event, data) {
    alert("the tree has been refreshed");
    $(this).jstree("open_all");  //Example: open all nodes after refreshing
})

【讨论】：

【解决方案4】：

来自jstree documentation：

.loaded()

一个虚拟函数，其目的是仅触发加载的事件。这个事件在之后触发一次树的根节点已加载，但在 initial_open 中设置的任何节点之前已打开。

因此，您可以从 ajax 调用的成功回调中调用此方法。像这样的：

$.ajax({
  url: "yourscript-url",
  success: function(){
    $('selector-for-jstree-container').jstree('loaded');
  }
});

另请参阅同一 jstree 文档页面上的“与树交互”部分。

【讨论】：

这不是我所需要的...我想将与 jsTree 相关的配置保存在一个地方。我正在寻找的是这样的事件：treeContainer.bind("reloaded.jstree", function () {...}).jstree(...)
@John Doe 很抱歉，但我认为 jstree 中没有这样的事件。您要么必须解决这个问题（就像我建议的那样），要么扩展 jstree 核心并实现这个新事件。