如何使用orgChart为已创建的组织结构图添加子节点？

嘿，我来帮你搞定这个orgChart添加子节点的问题！根据你给出的现有代码，我给你整理了两种最实用的实现方式：

方法一：修改数据源后重新渲染 #

这种方式适合你提前知道要添加的子节点数据，或者需要批量更新节点的场景：

1. 找到目标父节点并添加子节点数据
   先在你的datascource里找到要添加子节点的父节点（比如给id=2的「Bo Miao」加子节点），给它加上children数组：

   // 定位到id为2的父节点
   const targetParent = datascource.children.find(node => node.id === 2);
   // 添加子节点数据（注意id要全局唯一，不能和现有节点重复）
   targetParent.children = [
     { 'id': 6, 'name': 'Xiao Wang', 'title': 'Team Lead' },
     { 'id': 7, 'name': 'Xiao Li', 'title': 'Senior Engineer' }
   ];
   

2. 重新渲染组织结构图
   清空容器后重新初始化orgChart，就能看到新的子节点了：

   $('#chart-container').empty().orgchart({
     'visibleLevel': 2,
     'pan': true,
     'data': datascource,
     'nodeContent': 'title'
   });
   

方法二：动态添加子节点（无需重新渲染） #

如果需要在用户交互（比如点击按钮）后再添加子节点，用这种方式更灵活，大部分jQuery-orgChart版本都支持：

1. 获取orgChart实例
   先拿到已初始化的图表实例：

   const chartInstance = $('#chart-container').data('orgchart');
   

2. 定义要添加的子节点数据

   const newChildNode = { 
     'id': 8, 
     'name': 'Xiao Zhang', 
     'title': 'Junior Engineer' 
   };
   

3. 定位父节点DOM并添加
   通过节点的data-node-id属性找到目标父节点，然后调用addNode方法：

   // 找到id为2的父节点DOM
   const parentDom = $('#chart-container').find('[data-node-id="2"]');
   // 添加子节点
   chartInstance.addNode(newChildNode, parentDom);
   

注意事项 #

• 所有节点的id必须全局唯一，否则会导致图表渲染异常；
• 如果你的visibleLevel设置为2，新增的子节点属于第3层，默认会隐藏，你可以把visibleLevel改成3，或者点击父节点的展开按钮（如果启用了展开功能）；
• 如果你用的是旧版orgChart，addNode方法可能不存在，此时建议用方法一重新渲染。

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