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

TANKING 发布于2019-08-21 16:26 / 3270人阅读

摘要：组织架构图说明插件皆可用于使用方法中使用插件效果图定制化内容的效果图插件说明很好的的组织架构图，从上到下按层级展示汇报关系支持定制化内容，和异步加载子节点下面会讲到。且在开发中，用户希望能够根据数据定制每一块的内容展示。

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 = ""+
                          ""+
                          ""+
                          ""+ 
                        ""
            var $wrap = $(wrap);
            $wrap.find(".secondLevel").text(node.name);
            $wrap.find(".level").text(level[node._depth])            
            $(label).append($wrap);
        }

最后附上github地址,欢迎star

idc机房托管专线服务 java 加载子窗体定制化定制化服务定制化服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88554.html

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

摘要：组织架构图说明插件皆可用于使用方法中使用插件效果图定制化内容的效果图插件说明很好的的组织架构图，从上到下按层级展示汇报关系支持定制化内容，和异步加载子节点下面会讲到。且在开发中，用户希望能够根据数据定制每一块的内容展示。 spacetree组织架构图说明 jquery插件皆可用于react,使用方法:react中使用jquery插件效果图 showImg(https://segme...

youkede 2019-08-29 13:25 评论0 收藏0
spacetree组织架构图实现异步加载子节点，和定制化内容展示

摘要：组织架构图说明插件皆可用于使用方法中使用插件效果图定制化内容的效果图插件说明很好的的组织架构图，从上到下按层级展示汇报关系支持定制化内容，和异步加载子节点下面会讲到。且在开发中，用户希望能够根据数据定制每一块的内容展示。 spacetree组织架构图说明 jquery插件皆可用于react,使用方法:react中使用jquery插件效果图 showImg(https://segme...

booster 2019-08-05 12:02 评论0 收藏0
可能是你见过最完善的微前端解决方案

摘要：而从技术实现角度，微前端架构解决方案大概分为两类场景单实例即同一时刻，只有一个子应用被展示，子应用具备一个完整的应用生命周期。为了解决产品研发之间各种耦合的问题，大部分企业也都会有自己的解决方案。原文链接：https://zhuanlan.zhihu.com/p/... Techniques, strategies and recipes for building a modern ...

Kahn 2019-08-26 14:04 评论0 收藏0
深度递归和广度递归

摘要：递归递归算法在日常工作中算是用的比较多的一种，比如树的遍历，多层级树状结构的生成，遍历寻找某个树节点等先来看下数据结构张飞关羽刘备荀彧关平曹操貂蝉一般情况下后台返回类似于如上的嵌套数据结构，或者说只得到一部分数据，点击某个子节点，异步加载节递归递归算法在日常工作中算是用的比较多的一种，比如DOM树的遍历，多层级树状结构的生成，遍历寻找某个树节点等 1 先来看下数据结构 var re...

stormgens 2019-08-22 11:12 评论0 收藏0
京东单品页前端开发那些不得不说的事儿

摘要：是负责展示京东商品的落地页面。比如京东首页，正常情况加载完页面一共有多个节点，基本上全部用于展示商品信息广告图和内容布局，页面上的三方异步服务也比较少。原文：https://keelii.github.io/2016/07/31/something-have-to-say-with-JD-item 简介详情页也叫做单品页，域名以「item.jd.com/skuid.html」为格式...

FleyX 2019-08-22 10:36 评论0 收藏0