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

上一篇介绍了另外一种组织结构的图形展示方式，这一篇介绍组织的信息修改界面的实现。

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

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

一、     实现步骤

首先是在html文件中加入我们的弹出框

弹出框可以修改的数据就是组织名称、组织的类型、组织的上级组织。

底部有两个按钮，一个是删除、一个是修改。

 

 

其次是修改js脚本，绑定双击事件。

 

上面是双击的事件函数，针对指定的组织名称，通过ajax的方式获取数据，并填充弹出框。

这个弹出框的数据处理逻辑较以前增加了无信息的处理，在选项上多了个------选项，代表不选择，后续在后台数据处理中会用None来标识。

事件绑定的处理如下：

此处如此处理的原因是因为前面的数据都会被jOrgChart.js的脚本处理，在前面的数据都是配置到不显示的元素上的，通过观察网页上的元素，发现这些数据都有一个node的class样式。所以通过这个取得元素组后进行绑定前面的事件。双击事件会在响应时会同时响应两次单击事件，这里单击事件是显示的图形折叠与展开，并不冲突，所以不需要对单击事件屏蔽处理。

填充弹出框数据的后端处理逻辑如下：

这里的数据分为3个部分，一部分是被点击的组织本身的数据，封装为data_dict；一部分是组织列表数据，用于改变组织的上级组织信息，排除了自身，封装为organization_list；另一部分是组织类型数据，用于修改组织的类型，封装为organization_type_list。 此时完成了界面上双击组织框来弹出修改对话框的功能。