jquery.jsPlumb实现拓扑图

2022-04-19 06:25:51 来源：易采站长站作者：

基于jquery.jsPlumb编写拓扑图，供大家参考，具体内容如下

要求：实现公司组织结构拓扑关系，可展开，可收拢；动态数据展示；叶子节点可点击；

实现办法：

1 国内还有一个插件也比较简单，但是该插件只能全部展开，并不能收拢，放弃了该办法；

2 最后选择了这个插件，因为相关资料很少，所以每步都是自己摸索出来的；

对数据的要求：因为该插件的每个节点都是一个具有独立不同id的div模块，所以json数据要求有一个id属性，并且所有的id都要不一样；

实现的原理：

1 先定位所有的节点（这个还简单点，只要依次遍历数据就行）；

2 添加拓扑关系；（这个地方比较复杂，尤其是点击节点时，其他节点收缩，直接点展开，里面的循环量特别大，几乎都是在一个大循环里面套用了很多的子循环）

1 html部分（注意事项，里面的图片自己设置）

<!DOCTYPE html><html><head><meta charset="utf-8">  <script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>  <script type="text/javascript" src="scripts/jquery.jsPlumb-1.4.0-all.js"></script>  <script type="text/javascript" src="scripts/test.js"></script>  <style type="text/css">    .rootNode {     // background-color: #79deff;      width: 36px;      height: 36px;      position: absolute;      background-image: url(images/monitor_server.png);      background-size: 32px 32px;      background-repeat: no-repeat;      background-position:center;    /*  -webkit-box-shadow: #909090 0px 0px 10px;      -moz-box-shadow: #909090 0px 0px 10px;      box-shadow: #909090 0px 0px 10px;*/    }    .instanceNode {     // background-color: #50d4ff;      width: 36px;      height: 36px;      position: absolute;      background-image: url(images/instance_big.png);      background-size: 32p   var orgnize=nodeArr[j],leftLoc;   if(j<parseInt(nodeNumber/2)){    leftLoc=nodeLoc-5*(j+1);      }else if(j>parseInt(nodeNumber/2)){         leftLoc=nodeLoc+5*(j-parseInt(nodeNumber/2));       }else{        leftLoc=nodeLoc;       }   if(orgnize.hasOwnProperty("children")){    var html="<div id='instance_"+orgnize.id+"' class='instanceNode' style='top:60%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+orgnize.text+"</div></div>";       $("body").append(html);         var staffArr=orgnize.children;         var staffLength=staffArr.length;          var staffLoc=leftLoc;         staffLocation(staffLoc,staffArr,staffLength); //员工定位   }   else   {    var html="<div id='instance_"+orgnize.id+"' class='instanceNode_leaf' style='top:60%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+orgnize.text+"</div></div>";       $("body").append(html);   }     } } else if(nodeNumber%2==0){   for(var j=0;j<nodeNumber;j++){   var orgnize=nodeArr[j],leftLoc;   if(j+1<=parseInt(nodeNumber/2)){    leftLoc=nodeLoc-5-5*j;       }else if(j+1>parseInt(nodeNumber/2)){         leftLoc=nodeLoc+5+5*(j-parseInt(nodeNumber/2));       }   if(orgnize.hasOwnProperty("children")){   var html="<div id='instance_"+orgnize.id+"' class='instanceNode' style='top:60%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+orgnize.text+"</div></div>";        $("body").append(html);         var staffArr=orgnize.children;         var staffLength=staffArr.length;          var staffLoc=leftLoc;           staffLocation(staffLoc,staffArr,staffLength); //员工定位      }      else      {       var html="<div id='instance_"+orgnize.id+"' class='instanceNode_leaf' style='top:60%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+orgnize.text+"</div></div>";        $("body").append(html);      }       } }}//员工定位function staffLocation(nodeLoc,nodeArr,nodeNumber){  if(nodeNumber%2==1){    for(var j=0;j<nodeNumber;j++){   var staff=nodeArr[j],leftLoc;   if(j<parseInt(nodeNumber/2)){    leftLoc=nodeLoc-5*(j+1);      }else if(j>parseInt(nodeNumber/2)){         leftLoc=nodeLoc+5*(j-parseInt(nodeNumber/2));        }else{        leftLoc=nodeLoc;       }   if(staff.hasOwnProperty("children")){    var html="<div id='instance_"+staff.id+"' class='instanceNode' style='top:80%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+staff.text+"</div></div>";       $("body").append(html);       }   else   {    var html="<div id='instance_"+staff.id+"' class='instanceNode_leaf' style='top:80%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+staff.text+"</div></div>";       $("body").append(html);   }     } } else if(nodeNumber%2==0){   for(var j=0;j<nodeNumber;j++){   var staff=nodeArr[j],leftLoc;   if(j+1<=parseInt(nodeNumber/2)){    leftLoc=nodeLoc-5-5*j;       }else if(j+1>parseInt(nodeNumber/2)){         leftLoc=nodeLoc+5+5*(j-parseInt(nodeNumber/2));       }   if(staff.hasOwnProperty("children")){   var html="<div id='instance_"+staff.id+"' class='instanceNode' style='top:80%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+staff.text+"</div></div>";        $("body").append(html);      }      else      {       var html="<div id='instance_"+staff.id+"' class='instanceNode_leaf' style='top:80%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+staff.text+"</div></div>";        $("body").append(html);      }       } }}

3、最后的效果

jquery.jsPlumb实现拓扑图