Fancytree：高亮包含活跃子/孙节点的父节点文本

核心思路 #

别直接手动操作DOM类名，改用Fancytree内置节点API判断状态，能彻底解决选中状态不同步的逻辑问题。具体逻辑：

• 监听节点select和deselect事件，覆盖所有选中状态变化场景
• 遍历当前节点的所有父节点，根据是否存在活跃后代切换高亮类
• 依托Fancytree原生方法判断后代状态，避免DOM操作的误差

实现代码 #

// 初始化Fancytree时配置事件
$("#tree").fancytree({
  selectMode: 3, // 按需选择合适的选择模式，示例用多选
  // 其他原有配置...
  events: {
    select: function(event, data) {
      syncParentHighlight(data.node);
    },
    deselect: function(event, data) {
      syncParentHighlight(data.node);
    }
  }
});

// 同步父节点高亮状态的核心函数
function syncParentHighlight(node) {
  let parent = node.getParent();
  // 逐层向上遍历所有父节点
  while (parent) {
    // 用API判断当前父节点是否有选中的后代（含子、孙节点）
    const hasActiveDescendant = parent.hasSelectedDescendants();
    // 直接获取节点的文本容器，避免全局DOM查找出错
    const titleEl = parent.$title;

    if (hasActiveDescendant) {
      titleEl.addClass("node-highlight");
    } else {
      titleEl.removeClass("node-highlight");
    }
    // 继续遍历上层父节点
    parent = parent.getParent();
  }
}

高亮样式定义 #

/* 自定义高亮样式，可按需调整 */
.node-highlight {
  color: #e63946 !important;
  font-weight: 600;
}

关键说明 #

• hasSelectedDescendants()是Fancytree原生API，会自动递归检查所有后代节点的选中状态，比手动判断子节点可靠得多
• 同时监听select和deselect事件，确保任何选中状态变更都能触发父节点更新
• 用节点的$title属性直接获取文本元素，比全局jQuery选择器精准，避免误操作其他节点
• 如果你的「活跃节点」是自定义状态而非选中状态，只需把hasSelectedDescendants()替换为对应的状态判断逻辑即可，比如检查节点是否带有自定义active属性

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