摘要：组织架构图说明插件皆可用于使用方法中使用插件效果图定制化内容的效果图插件说明很好的的组织架构图，从上到下按层级展示汇报关系支持定制化内容，和异步加载子节点下面会讲到。且在开发中，用户希望能够根据数据定制每一块的内容展示。
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
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112584.html
摘要：组织架构图说明插件皆可用于使用方法中使用插件效果图定制化内容的效果图插件说明很好的的组织架构图，从上到下按层级展示汇报关系支持定制化内容，和异步加载子节点下面会讲到。且在开发中，用户希望能够根据数据定制每一块的内容展示。 spacetree组织架构图 说明 jquery插件皆可用于react,使用方法:react中使用jquery插件 效果图 showImg(https://segme...
摘要：而从技术实现角度，微前端架构解决方案大概分为两类场景单实例即同一时刻，只有一个子应用被展示，子应用具备一个完整的应用生命周期。为了解决产品研发之间各种耦合的问题，大部分企业也都会有自己的解决方案。 原文链接：https://zhuanlan.zhihu.com/p/... Techniques, strategies and recipes for building a modern ...
摘要：是负责展示京东商品的落地页面。比如京东首页，正常情况加载完页面一共有多个节点，基本上全部用于展示商品信息广告图和内容布局，页面上的三方异步服务也比较少。 原文：https://keelii.github.io/2016/07/31/something-have-to-say-with-JD-item 简介 详情页也叫做单品页，域名以「item.jd.com/skuid.html」为格式...
