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

上一篇我们对组织管理界面的组织信息数据获取进行了编写。这一篇我们对图形的展示进行深入推进。

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

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

一、     实现步骤

(一)      前端获取的组合逻辑

用的主要方法，JS动态生成元素。解决的问题是将我们的数据构造成代码示例中的形式，以达到我们在页面显示组织构架的效果。

考虑到动态生成的元素没有挂载在文档中后续查找元素是找不到的，这个时候我们先把元素都在一个隐藏列表里挂载上，所以第一步先申明了两个ul元素，一个是正式的，一个是挂数据的。这两个ul在html中就已经定义好了。

后面通过ajax方法读取上一篇的数据接口获取数据。

然后通过循环处理这个数据。

   第一层循环处理的是数据字典的键值，先判断是不是已经存在的，没有就创建，在末尾还会考虑到这个是不是组织的第一层，如果是的话就加入到我们的功能实现ul里。这一层创建的li元素都会加入到存数据的ul里

   第二层是数据字典值的循环，先创建一个ul，再创建各个值的li元素，将li元素加入到ul里，ul最后再加到上一级的li里面。

最后通过jorgchart.js内函数渲染出来。

html中就是把几个需要的js文件都包含进去即可，这部分详情参见代码库提交记录，因为试了很多种，所以大家仔细分辨下 显示效果如下，点击上级收缩下级也是正常使用的。