如何让jstree的massload插件配合Ajax搜索实现全站点节点检索？

我之前也遇到过类似的需求——jstree默认只对已加载到DOM的节点生效搜索，而嵌套在未展开层级里的节点完全搜不到。结合你的Country->City->Site->Product->License层级结构，咱们可以从预存节点元数据、自定义搜索逻辑、联动massload自动加载路径这三个方面来解决：

步骤1：预获取所有Site节点的完整路径信息 #

要搜索所有Site节点，不管它们是否被加载，你需要先拿到所有Site节点的层级数据（包含节点ID、名称、完整父路径链）。可以在页面初始化时发起一次单独的Ajax请求，把数据存在全局变量里：

let allSiteNodes = [];
// 页面加载时拉取所有Site节点的完整数据
$.ajax({
  url: '/api/get-all-sites',
  method: 'GET',
  success: function(data) {
    // 数据格式建议：[{ id: 'site_001', text: '北京朝阳站点', path: ['cn', 'beijing', 'site_001'], parent: 'beijing' }, ...]
    allSiteNodes = data;
  }
});

步骤2：重写jstree的搜索匹配逻辑 #

jstree的search插件支持自定义匹配函数，我们可以让它同时检查已加载节点和预存的Site节点数据，甚至把匹配节点的父节点也标记为"匹配"，方便后续展开路径：

$('#your-tree-container').jstree({
  'core': {
    'data': function(node, callback) {
      // 保留你原有的按需加载逻辑：初始化加载国家，展开时加载子节点
      if (node.id === '#') {
        callback($.getJSON('/api/get-countries'));
      } else {
        callback($.getJSON(`/api/get-children/${node.id}`));
      }
    },
    'check_callback': true
  },
  'plugins': ['search', 'massload', 'state'],
  'search': {
    'case_insensitive': true,
    'show_only_matches': true,
    // 自定义搜索匹配函数
    'search_callback': function(node, search_str) {
      // 先检查当前已加载节点是否匹配
      if (node.text.toLowerCase().includes(search_str.toLowerCase())) {
        return true;
      }
      // 再检查当前节点是否在某个匹配Site的路径中（用于展开父节点）
      const matchedSites = allSiteNodes.filter(site => 
        site.text.toLowerCase().includes(search_str.toLowerCase())
      );
      return matchedSites.some(site => site.path.includes(node.id));
    }
  }
});

步骤3：结合massload自动加载并展开匹配路径 #

当搜索到未加载的Site节点时，用massload批量加载它的父路径节点，然后自动展开到目标Site：

$('#your-tree-container').on('search.jstree', function(e, data) {
  const searchStr = data.str.toLowerCase();
  if (!searchStr) return;

  // 筛选出所有匹配的Site节点
  const matchedSites = allSiteNodes.filter(site => 
    site.text.toLowerCase().includes(searchStr)
  );
  if (matchedSites.length === 0) return;

  // 收集所有未加载的父节点ID（去重）
  const nodesToLoad = new Set();
  matchedSites.forEach(site => {
    site.path.forEach(nodeId => {
      if (!$('#your-tree-container').jstree('is_loaded', nodeId)) {
        nodesToLoad.add(nodeId);
      }
    });
  });

  // 用massload批量加载节点，加载完成后展开路径并高亮
  if (nodesToLoad.size > 0) {
    $('#your-tree-container').jstree('massload', Array.from(nodesToLoad), function() {
      matchedSites.forEach(site => {
        $('#your-tree-container').jstree('open_path', site.path);
        $('#your-tree-container').jstree('select_node', site.id);
      });
    });
  }
});

额外注意点 #

• 如果Site节点数量极多，预加载全部数据可能影响性能，可以改成前端搜索时实时请求后端模糊接口，返回匹配的Site节点及其路径，避免一次性加载大量数据。
• 一定要保证节点ID的唯一性，否则open_path和select_node会出现错误。
• 可以根据需求调整show_only_matches参数，控制是否只显示匹配的节点分支。

内容的提问来源于stack exchange，提问作者Hintham