jquery.orgchart组织架构认识

• jquery.orgchart

jquery.orgchart通过OrgChart API定义的数据接口以json的数据形式将自己想要的组织架构数据传给orgChart，上手难度低，可扩展性比较高，其主要特征如下：

（1）支持<ul>，json, ajax数据源；

（2）用户可以对展开/折叠结果图中的节点；

（3）用户可以设置结构图的朝向；

（4）用户可以通过拖拽节点到其他节点来改变图的结构；

（5）用户可以对图中的节点进行增删节点，并导出最终的结构关系；

（6）支持导出结构图为png图片；

（7）支持对结构图的缩放和平移。

对于一个插件的使用，主要是搞懂插件是如何封装的，作用在哪里，我们需要传哪些参数进去，所以我们可以通过给出的示例文件查看一下我们必须传进去的参数，其次就是插件有些样式或者事件并不是我们想要的样式，所以我们需要大致理解插件的封装的过程才进行想要的效果的更改；orgchart的使用过程如下：

1. HTML页面定义一个div容器：

图8

1. 在js中，我们只需要将所需要的数据以children的树形结构进行处理好，这样子orgchart会按照所处理好的数据进行展示。因为我们需要将后台读取的所有的节点根据parentid进行处理好，如：

图9

1. 将数据处理之后这时候我们可以定义一个数组datascource存储我们需要展示的数据，其数据形式为：

图10

图11

在这里需要注意的时候，在每次写入插件之前都要先清空一次对应的那个位置的div为空，不然会重复append之前的数据进去；

1. 最后就是需要看一下这个框架的源代码，从而进行更改为我们想要的效果，比如：由于点击展开或者收缩节点的时候，不是通过店家箭头指示，而是通过点击对应节点进行事件的响应，在prepend方法之前用wrap()讲箭头事件包含着节点，即：

图12

1. 效果图如下所示：

图13

• 总结

学习一个插件，最主要的是了解这个插件如何构造，在应用别人的插件的时候，只有搞懂这个，你才可以将其改成你想要的样式，甚至DIY一个自己的独特的样式，但是对于浏览器的兼容适应展示性还是需要多多学习别人封装好的插件是怎么处理的，这样子才可以不用通过js去控制样式适应浏览器尺寸大小。分享之中如有不当之处，随时欢迎指出，谢谢。