GetOrgchart：点击节点时调整节点高度及路径适配问题

嘿，刚上手GetOrgchart的时候我也踩过类似的坑，尤其是自定义节点高度和路径适配这块，咱们一步步来搞定它～

第一步：正确实现点击节点加载下属员工的功能 #

别直接手动改DOM，GetOrgchart有自己的数据更新机制，得用官方API来做才靠谱：

// 初始化图表
const orgChart = new getOrgChart(document.getElementById("orgChart"), {
  dataSource: [/* 你的初始职位数据 */],
  // 绑定节点点击事件
  onClick: function(sender, args) {
    // 模拟AJAX加载该职位下的员工数据（替换成你的实际接口逻辑）
    const loadEmployees = () => {
      // 假设返回的员工数据格式和初始节点结构一致
      return Promise.resolve([
        { id: args.node.id + "_emp1", name: "张三", parentId: args.node.id },
        { id: args.node.id + "_emp2", name: "李四", parentId: args.node.id }
      ]);
    };

    loadEmployees().then(employees => {
      // 把员工数据添加为当前节点的子节点
      args.node.children = employees;
      // 关键！调用update让图表重新计算布局和路径
      orgChart.update();
    });
  }
});

第二步：解决路径未适配的问题 #

你说手动调节点高度后路径不对，核心原因是直接修改DOM样式绕开了GetOrgchart的布局计算，得用自定义模板来控制节点高度，这样图表会自动重新计算路径：

const orgChart = new getOrgChart(document.getElementById("orgChart"), {
  dataSource: [/* 初始数据 */],
  // 使用自定义模板
  template: "custom",
  customTemplate: {
    node: function(item) {
      // 根据是否有子节点（已展开）设置不同高度
      const nodeHeight = item.children && item.children.length > 0 ? 160 : 80;
      return `
        <div style="height: ${nodeHeight}px; border: 1px solid #ccc; padding: 10px; box-sizing: border-box;">
          <h3>${item.name}</h3>
          <!-- 展开时显示员工列表 -->
          ${item.children ? `<div class="emp-list">${item.children.map(e => e.name).join("<br>")}</div>` : ""}
        </div>
      `;
    }
  },
  // 主题里的节点高度设为auto，让模板决定最终高度
  theme: {
    node: {
      height: "auto",
      width: 220
    },
    // 可以顺便调整线条样式，确保路径显示清晰
    line: {
      width: 2,
      color: "#666"
    }
  }
});

这样每次调用update()时，图表会根据模板生成的节点高度重新计算所有节点的位置，路径自然就适配了。

第三步：解决自定义主题高度无效的问题 #

如果之前改主题高度没效果，大概率是这两个原因：

• 你是在初始化图表之后才修改主题，这时候样式已经渲染完成，得重新初始化或者调用orgChart.refresh()触发重绘；
• 自定义模板的inline样式优先级比主题样式高，所以主题里的height会被覆盖，要么统一用模板控制高度，要么把主题样式写成带!important的CSS类（不推荐，尽量用模板逻辑统一控制）。

额外小技巧 #

如果还是遇到路径偏移，可以试试在update()之后手动触发一次重绘：

orgChart.update();
setTimeout(() => {
  orgChart.refresh();
}, 100);

有时候异步加载数据后DOM渲染有延迟，加个短延时能解决这类小问题。

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