获取服务器新数据后如何重新渲染jstree？现有方法失效

问题描述 #

每次从服务器获取新数据后，想要重新渲染jstree，但在代码标记*的位置尝试以下两种方法均无效，树始终显示初始数据：

尝试的代码1：

folderTreeView.jstree(true).refresh();

尝试的代码2：

folderTreeView.jstree(true).redraw(true)

相关代码片段：

folderTreeView = $(".folderpreview");
// Files Treeview
if (folderTreeView.length) {
  document.getElementById("preview").innerHTML = '<embed type="text/pdf" src=""  width="0" height="0" >';
  folderTreeView
    .on("changed.jstree", function (e, data) {
      //blabla
    })
    .jstree({
      core: {
        data: datanew.children,
      },
      plugins: ["types"],
      types: {
        default: {
          icon: "far fa-folder font-medium-1",
        },
        ".jpg": {
          icon: "far fa-file-image text-info font-medium-1",
        },
        ".docx": {
          icon: "far fa-file-word text-info font-medium-1",
        },
        ".doc": {
          icon: "far fa-file-word text-info font-medium-1",
        },
        ".pdf": {
          icon: "far fa-file-pdf text-info font-medium-1",
        },
      },
    })
* // 此处为尝试调用refresh/redraw的位置
}

解决方案 #

方法1：更新数据源后刷新（适用于异步获取数据后更新） #

直接调用refresh()不会自动更新数据源，必须先修改jstree实例的数据源配置，再执行刷新：

将*处的代码替换为：

// 确保此处datanew已经是最新的服务器返回数据
var treeInstance = folderTreeView.jstree(true);
// 更新核心数据源
treeInstance.settings.core.data = datanew.children;
// 执行刷新
treeInstance.refresh();

方法2：销毁旧实例后重新初始化（适用于完全替换树结构） #

如果需要彻底重置树，先销毁已存在的jstree实例，再用新数据重新初始化：

folderTreeView = $(".folderpreview");
// Files Treeview
if (folderTreeView.length) {
  document.getElementById("preview").innerHTML = '<embed type="text/pdf" src=""  width="0" height="0" >';
  
  // 先销毁已有实例（如果存在）
  if (folderTreeView.jstree(true)) {
    folderTreeView.jstree(true).destroy();
  }
  
  // 用新数据重新初始化jstree
  folderTreeView
    .on("changed.jstree", function (e, data) {
      //blabla
    })
    .jstree({
      core: {
        data: datanew.children,
      },
      plugins: ["types"],
      types: {
        default: {
          icon: "far fa-folder font-medium-1",
        },
        ".jpg": {
          icon: "far fa-file-image text-info font-medium-1",
        },
        ".docx": {
          icon: "far fa-file-word text-info font-medium-1",
        },
        ".doc": {
          icon: "far fa-file-word text-info font-medium-1",
        },
        ".pdf": {
          icon: "far fa-file-pdf text-info font-medium-1",
        },
      },
    });
}

注意事项 #

• 确保datanew是服务器返回的最新数据，且在执行更新代码前已经完成获取
• 如果是异步请求数据，要将更新代码放在请求的回调函数或Promise的then方法中

内容的提问来源于stack exchange，提问作者Badr-Eddine El mostaine