jQuery Orgchart：页面加载完成后逐个展开节点并显示动画

问题说明 #

需求：页面加载完成后，让jQuery Orgchart的所有节点逐个以展开动画显示。以下是尝试但无法正常运行的代码：

var oc = $('#chart-container').orgchart({
  'data': datascource,
  'depth': 1,
  'nodeTitle': 'name',
  'nodeContent': 'title',
  'nodeID': 'id',
  'createNode': function($node, data) {
    var nodePrompt = $('<i>', {
      'class': 'fa fa-info-circle second-menu-icon',
      click: function() {
        $(this).siblings('.second-menu').toggle();
      }
    });
    var secondMenu = '<div class="second-menu"><img class="avatar" src="img/avatar/' + data.id + '.jpg"></div>';
    $node.append(nodePrompt).append(secondMenu);
  },
  'direction': 'b2t'
});


oc.$chart.find('.node').each("pageload", function() {
  oc.showChildren($(this));
});

错误分析 #

1. 语法错误：jQuery的.each()方法不支持将事件名作为第一个参数，且不存在pageload事件，无法触发展开逻辑。
2. 无逐个动画效果：直接批量调用showChildren会一次性展开所有节点，无法实现逐个显示的动画。

修正方案 #

通过页面加载完成事件触发，获取所有包含子节点的父节点，然后通过递增延迟逐个调用展开方法，实现动画效果：

var oc = $('#chart-container').orgchart({
  'data': datascource,
  'depth': 1,
  'nodeTitle': 'name',
  'nodeContent': 'title',
  'nodeID': 'id',
  'createNode': function($node, data) {
    var nodePrompt = $('<i>', {
      'class': 'fa fa-info-circle second-menu-icon',
      click: function() {
        $(this).siblings('.second-menu').toggle();
      }
    });
    var secondMenu = '<div class="second-menu"><img class="avatar" src="img/avatar/' + data.id + '.jpg"></div>';
    $node.append(nodePrompt).append(secondMenu);
  },
  'direction': 'b2t'
});

// 页面加载完成后执行展开逻辑
$(document).ready(function() {
  // 获取所有有子节点的父节点（排除最底层无后代的节点）
  var parentNodes = oc.$chart.find('.node').has('.children');
  // 逐个展开，添加递增延迟实现动画效果
  parentNodes.each(function(index) {
    var $node = $(this);
    // 每个节点延迟300ms展开，可根据需求调整时长
    setTimeout(function() {
      oc.showChildren($node);
    }, index * 300);
  });
});

关键修改点 #

• 使用$(document).ready()确保Orgchart初始化完成后再执行展开逻辑。
• 通过.has('.children')筛选出需要展开的父节点，避免对无后代节点执行无效操作。
• 利用setTimeout和索引值设置递增延迟，让节点按顺序逐个展开，形成动画效果。

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