持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第24天，点击查看活动详情

上一篇我们成功绘制了组织架构图形，考虑到原示例是单起点的，我准备改造一下，改造成和我们最开始设计的那样，能够显示多个并列的组织树。

这个项目的链接是：https://github.com/Amor122/MyTest.git

我已经设置了公开权限，大家都可以访问，项目每天的进度基本上是和文章更新一致的，或者略快于文章，我也是边写边发的，有些代码在后续版本说不定就更改了。代码的字数意义不大，有需要的都可以去项目上直接看，这里我都换成了图片。

一、     实现步骤

首先是改写原先的接口数据，要把顶层组织，即没有上级组织的组织信息单独组一个数据，组装成为一个列表，最后也是通过json响应返回。

接着在前端页面中扩展原来的元素。这里是相当于手动加了一个组织。

再在前端脚本中，先把顶级组织的数据处理过程加进来。这个数据的处理也是动态创建li元素，并追加到一个ul中，这个ul再加到我们上面id为start的li中。

此时就不用再在后面手动指定哪个是第一级组织了，那段代码直接删除即可。原来的逻辑这样写也不是很合适，现在可以解除脚本和数据的耦合性，只需要根据数据来生成图形了。

这个实现的方法本质上是在图形的最上层加了人工定义的最顶层组织——组织构架。后续的嵌套方式和原先是一样的，都是li和ul的互相嵌套。

此时加点数据之后的组织构架图是这样的，符合了我们在早期设计的预期，也为后续修改删除这些元素奠定了基础