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

上一篇我们完成了组织管理界面的设计工作，这一篇我们进行绘制，先选一个界面把数据构造起来。

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

一、实现步骤

(一) 展示效果的设计

在网上看了好几个组织结构页面显示效果的示例，一直没有找到一个合适我们这个项目的，不是单起点的页面就是绘制的位置不是很合适，从中挑选了一个我认为比较适合的案例来使用。

我比较倾向于这一款，虽然只有单个入口，但也不是不能解决这个问题。前端显示的页面组成如下：

这个图形的实现在源代码里是显示为ul和li的组合，对于这些数据，我们可以在后台服务器直接构造字典，这个我考虑了很久，今天先给大家分享后台数据的构造

讲解下这段代码。这段代码相当于把数据组装成为了一个有子项目的字典形式。

字典的键可以看做是当前的节点，字典的值是他的下级元素。

在模型定义的时候我们就设置好了这个组织名称的唯一性限制，所以我们在后续转换为页面上的列表时，可以通过id来确定单个节点

当然，利用反向关系也是可以查询的，一开始我只写了反向名称，查出来全是None，在后续查阅资料时，发现需要将all()函数连在末尾才行。

一开始是这样的：

print(obj.down_organization)

后续是这样的：

print(obj.down_organization.all())

就不必像我这样自己遍历数据了。

此时数据已经构造好了，大家可以先考虑下怎么通过js组装起来，像我们的示例页面那样展示出来。