为什么fancytree懒加载时父级行的自定义样式会被移除？

问题原因 #

• Fancytree内置的节点重绘机制：触发懒加载子节点、展开父节点操作时，Fancytree会自动重绘所有关联父节点的行DOM元素，重绘过程会清空行上所有非Fancytree内置的自定义类，你手动添加的level1/2/3类不属于内置类，会被直接清除。
• 回调覆盖范围不足：你仅在renderColumns回调中执行了加类逻辑，但renderColumns仅在表格列渲染阶段触发，父节点行被重绘时没有对应的类补充逻辑，原有类自然丢失。

注：你代码里$tdList = $(node.tr)变量名命名不规范，拿的是行元素却命名为tdList，但这不是类丢失的原因，仅建议优化命名。

解决方案 #

方案1：新增renderNode回调兜底加类逻辑 #

renderNode是Fancytree每次节点行被创建/重绘时都会触发的回调，在这里执行加类操作，可保证每次重绘后层级类都能被重新添加，代码修改如下：

extensions: ["table"],
table: {
  nodeColumnIdx: 1
},
// 新增renderNode回调，每次行重绘都重新加类
renderNode: function(event, data) {
  renderRow($(data.node.tr), data.node.getLevel());
},
renderColumns: function (event, data) {
  var node = data.node;
  renderRow($(node.tr),node.getLevel());
},

function renderRow($this,level) {
  // 先清除旧层级类，避免类累加错误
  $this.removeClass('level1 level2 level3');
  $this.addClass('level'+(level%3+1));
  // 其余原有逻辑
  ...
}

方案2：使用Fancytree内置的extraClasses属性存储自定义类 #

Fancytree重绘节点时会自动保留extraClasses属性里的自定义类，直接修改该属性即可避免类被清除，代码修改如下：

extensions: ["table"],
table: {
  nodeColumnIdx: 1
},
renderColumns: function (event, data) {
  var node = data.node;
  var targetLevel = node.getLevel();
  var targetClass = 'level'+(targetLevel%3+1);
  // 避免重复添加类
  if (!node.extraClasses.includes(targetClass)) {
    // 先清除旧的层级类
    node.extraClasses = node.extraClasses.replace(/level[1-3]/g, '').trim();
    node.extraClasses += ' ' + targetClass;
    // 触发重绘让类生效
    node.render();
  }
  renderRow($(node.tr), targetLevel);
},

function renderRow($this,level) {
  // 其余原有逻辑
  ...
}

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