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

Posted homehtml

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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


以上是关于spacetree组织架构图 实现异步加载子节点,和定制化内容展示的主要内容,如果未能解决你的问题,请参考以下文章

自定义 JavaScript 可视化工具包 Spacetree 节点

JSTREE动态加载子节点

elementUIel-tree搜索时加载子节点对应父节点父节点对应子节点树

ext-4.2.1.883 页面加载子页面

elementUIel-tree搜索时加载子节点对应父节点父节点对应子节点树

图融合之加载子图:Tensorflow.contrib.slim与tf.train.Saver之坑