当前位置: 首页 > Web前端 > HTML5

spacetree组织图实现子节点异步加载和自定义内容展示

时间:2023-04-05 13:19:59 HTML5

spacetree组织图展示react中可以使用jquery插件,使用方法:在react中使用jquery插件渲染自定义渲染图content插件描述很好画布的组织结构图从上到下分层展示上下级关系,支持自定义内容,异步加载子节点(下文介绍)。相关API请参考:官网或example1.js数据格式vardata={id:01,//每个节点都有唯一的标签data:{},//存放每个节点children的数据:[//存储元素子节点{id:011,data:{},children:[]},{id:012,data:{},children:[]}]}开发痛点插件默认加载所有数据,当后台数据量过大时,返回一次页面就会卡顿,用户体验相当不好。并且在开发中,用户希望能够根据数据自定义每个区块的内容展示。####解决方案1??针对第一个问题:每次只返回两层数据,(注意所有数据必须有唯一id)其余数据可以异步加载到架构图中添加子节点在官网上找到一个方法,当通过ajax请求返回的数据时:st.addSubtree(data,type,{//st指的是创建的树对象,可以设置为全局变量,供外部Get//data是ajax获取的值//type:"animate":"replot"hideLabels:false,onComplete:function(){//加载完成回调Log.write("subtreeadded");}});同时还有一个移除子节点的apist.removeSubtree(id,true,'animate',{//id:要删除子节点的节点idhideLabels:false,//动画执行processonComplete是否隐藏节点:function(){removing=false;Log.write("subtreeremoved");}});解决方案2针对第二个问题:还有一个api可以自定义每个节点的内容,用laionCreateLabel:有两个参数label,node:label指的是容器div,node指的是每个block对应的数据,这里使用jquery方法根据数据动态生成内容onCreateLabel:function(label,node){//label.id=node.id;varlevel=['第一层','第二层','第三层','第四层','第五层','第六层'];varwrap=''+'

'+'
'+'
'+'
'var$wrap=$(wrap);$wrap.find('.secondLevel').text(node.name);$wrap.find('.level').text(level[node._depth])$(label).append($wrap);}最后附上github地址,欢迎star