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

最近发现了一个很好用的插件，可以生成一个树形，所以这一篇补充下我们的组织结构图的生成方式。

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

一、文件引入

将这个插件的代码仓库下载下来，放入我们的static文件夹下面的文件夹里。github.com/zTree/zTree…

在组织管理界面文件的对应位置引入对应的css和js文件。

    <link rel="stylesheet" href="/static/ztree/css/zTreeStyle/zTreeStyle.css"/>

    <script src="/static/ztree/js/jquery.ztree.all.min.js"></script>

二、参照demo实现

我们参照demo中的simpledata文件进行编写我们的树。

这要是三个步骤，配置参数setting，构造数据，生成数据树。

配置可以从网上找个好看点的，但simpleData指定了数据格式，这个不可省略；数据我们在后台构造

样例文件部分内容如下图：

数据构造的视图函数如下

id是默认的当前节点索引标识符，pId是上级的索引标识符。name是展示的内容。

对比其他样例文件，我们可以通过配置来重新设置这两个标识符。

前台就使用ajax方式获取这个数据并生成树

中间的

 zTreeObj = $.fn.zTree.init($("#myZTree"), setting, zTreeData);

即是将配置和数据应用到html文件的id为myZTree的div中去。

此时的页面两个图形是在一条竖线上的，修改html文档，利用表格横向排版。

此时的效果如下

这里对表格的第一列也就是ztree树的那列进行了宽度的调整，以便展开节点时不会引起右侧的组织结构图形的位置变动。