spacetree组织架构图 实现异步加载子节点，和定制化内容展现

spacetree组织架构图

说明

jquery插件皆可用于react,使用方法:react中使用jquery插件

效果图

定制化内容的效果图

插件说明

很好的canvas的组织架构图，从上到下按层级展现汇报关系,
 支持定制化内容，和异步加载子节点(下面会讲到)。
 相关api请参考：

官网
或是example1.js

数据格式

var data = {
         id:01,      //每一个节点有一个惟一的标示
         data:{},    //存放每一个节点数据
         children:[  //存放元素子节点
            {
            id:011,
            data:{},
            children:[]
         },
         {
            id:012,
            data:{},
            children:[]
         }
         ]
     }

开发中的痛点问题

插件默认加载所有数据，当后台数据量太大，一次返回时，
 会形成页面卡死，用户体验至关很差。且在开发中，用户希
 望可以根据数据定制每一块的内容展现。

#### 解决办法1

对于第一个问题：每次只返回两层的数据,(注意，全部的数据必需要有一个不重复的id)
 剩下的数据能够经过异步加载的方式给架构图添加子节点
 在官网上找到一个办法,当经过ajax请求回来的数据后经过：

st.addSubtree(data, type, {   //st指的是建立的树对象，能够将其设为全局变量，
                                        以便外面拿到
                                      //data即ajax获取的值
                                      //type:"animate":"replot"
            hideLabels: false,
            onComplete: function() {   //加载完成后的回调
                Log.write("subtree added");
            }
        });

同时还有另一个api,用于删除子节点

st.removeSubtree(id, true, 'animate', {   //id:想要删除子节点的节点的id标识
                            hideLabels: false, //动画执行过程当中是否隐藏节点
                            onComplete: function() {
                              removing = false;
                              Log.write("subtree removed");
                            }
                        });

解决办法2

对于第二个问题：一样有一个api用lai定制化每一个节点的内容
 onCreateLabel:里面有两个参数label,node:label指的是容器
 div,node指的是每块对应的数据，这里用jquery的方式根据数据
 动态生成内容。

onCreateLabel: function (label, node) { //
            label.id = node.id;
            var level = ['第一层','第二层','第三层','第四层','第五层','第六层'];
            var wrap = '<div class="wrap">'+
                          '<div class="level"></div>'+
                          '<div class="secondLevel"></div>'+
                          '<div class="level"></div>'+ 
                        '</div>'
            var $wrap = $(wrap);
            $wrap.find('.secondLevel').text(node.name);
            $wrap.find('.level').text(level[node._depth])            
            $(label).append($wrap);
        }

最后附上github地址,欢迎star