基于图形化的组织架构设计器

企业管理中，组织架构是最基础的数据，平时一般都是通过树形结构或列表平面化展示，但这样不够直观，领导在批准组织架构调整中，往往希望更接近组织架构图的形式展现，利用前面讲述的设计器课程思路，我设计了一个组织架构设计器：

 

如上图，可以实现公司、部门、岗位、员工的设计，为了方便扩展，我把它设计成了一个JQuery插件，很容易初始化：

页面上定一个

的div,重绘控件时，如果需要加载一些数据，可以在onLoad方法里返回加载的数据，保存数据在onSave里可以获得页面上的数据，并且数据状态通过status来识别1：未改变，0：新增加，2：已修改。

也可以在onPrint获得设计画布的图片，是base64编码的DataUrl形式。

设计器支持代码数据的查看和修改。

属性页是自已参考easyui 的propertyGrid写的组件，支持扩展属性显示，比如显示员工的对话框等。

这里面对数据的自动排列（刷子图标）我花了一点时间写了一个算法，感觉有点小成就 :P

一些对齐之类的功能就很普通了。

你可以从www.creativeflow.cn/home/demodesigner查看一下示例（IE目前不支持）。

感谢支持，有啥问题可以给我留言。

本文为原创，转载请注明出处。

转载于:https://www.cnblogs.com/coolalam/p/11139782.html