jquery.jsPlumb實現(xiàn)拓撲圖
更新時間：2022年03月31日 09:14:28 作者：飛翔的飛起
這篇文章主要為大家詳細介紹了jquery.jsPlumb實現(xiàn)拓撲圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
基于jquery.jsPlumb編寫拓撲圖，供大家參考，具體內(nèi)容如下
要求：實現(xiàn)公司組織結(jié)構(gòu)拓撲關(guān)系，可展開，可收攏；動態(tài)數(shù)據(jù)展示；葉子節(jié)點可點擊；
實現(xiàn)辦法：
1 國內(nèi)還有一個插件也比較簡單，但是該插件只能全部展開，并不能收攏，放棄了該辦法；
2 最后選擇了這個插件，因為相關(guān)資料很少，所以每步都是自己摸索出來的；
對數(shù)據(jù)的要求：因為該插件的每個節(jié)點都是一個具有獨立不同id的div模塊，所以json數(shù)據(jù)要求有一個id屬性，并且所有的id都要不一樣；
實現(xiàn)的原理：
1 先定位所有的節(jié)點（這個還簡單點，只要依次遍歷數(shù)據(jù)就行）；
2 添加拓撲關(guān)系；（這個地方比較復(fù)雜，尤其是點擊節(jié)點時，其他節(jié)點收縮，直接點展開，里面的循環(huán)量特別大，幾乎都是在一個大循環(huán)里面套用了很多的子循環(huán)）
1 html部分（注意事項，里面的圖片自己設(shè)置）
<!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: 32px 32px;
? ? ? ? ? ? background-repeat: no-repeat;
? ? ? ? ? ? background-position:center;
? ? ? ? ? ? -moz-background-size: 32px 32px;
? ? ? ? ? ? filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/instance_big.png', sizingMethod='scale')\9;
? ? ? ? ? ? -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/instance_big.png',sizingMethod='scale')"\9;
? ? ? ? ? ? cursor:pointer;
? ? ? ? ? ? /* -webkit-box-shadow: #666 0px 0px 10px;
? ? ? ? ? ? -moz-box-shadow: #666 0px 0px 10px;
? ? ? ? ? ? box-shadow: #666 0px 0px 10px; */
? ? ? ? }
? ? ? ? .instanceNode_leaf {
? ? ? ? ? // ?background-color: #50d4ff;
? ? ? ? ? ? width: 36px;
? ? ? ? ? ? height: 36px;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? background-image: url(images/user_online.png);
? ? ? ? ? ? background-size: 32px 32px;
? ? ? ? ? ? background-repeat: no-repeat;
? ? ? ? ? ? background-position:center;
? ? ? ? ? ? -moz-background-size: 32px 32px;
? ? ? ? ? ? filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/user_online.png', sizingMethod='scale')\9;
? ? ? ? ? ? -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/user_online.png',sizingMethod='scale')"\9;
? ? ? ? ? ? cursor:pointer;
? ? ? ? ? ? /* -webkit-box-shadow: #666 0px 0px 10px;
? ? ? ? ? ? -moz-box-shadow: #666 0px 0px 10px;
? ? ? ? ? ? box-shadow: #666 0px 0px 10px; */
? ? ? ? }
?
? ? ? ? .nodeWord{
? ? ? ? ? ? //font-weight: bold;
? ? ? ? ? ? font-size: 12px;
? ? ? ? ? ? color:white;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? bottom: -20px;
? ? ? ? ? ? width: 100%;
? ? ? ? ? ??
? ? ? ? }
? ? ? ? .cursorEndpoint{
? ? ? ? ? ? cursor:pointer;
? ? ? ? }
? ? ? ? body{
? ? ? ? ? ? background:#27363F;
? ? ? ? }
? ? </style>
?
</head>
?
<body style="overflow: scroll;">
<div id="top_server" class="rootNode"><div style=""></div></div>
</body>
</html>2 test.js
var tree_json=[
? ? {
? ? ? ? "id": "1",
? ? ? ? "text": "國核院",
? ? ? ? "iconCls": "icon-org",
? ? ? ? "state": "closed",
? ? ? ? "children": [
? ? ? ? ? ? {
? ? ? ? ? ? ? ? "id": "2",
? ? ? ? ? ? ? ? "text": "土木工程部",
? ? ? ? ? ? ? ? "iconCls": "icon-org",
? ? ? ? ? ? ? ? "state": "closed",
? ? ? ? ? ? ? ? "children": [
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? "id": "3",
? ? ? ? ? ? ? ? ? ? ? ? "text": "科室一",
? ? ? ? ? ? ? ? ? ? ? ? "iconCls": "icon-org",
? ? ? ? ? ? ? ? ? ? ? ? "state": "closed",
? ? ? ? ? ? ? ? ? ? ? ? "children": [
? ? ? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "id": "4",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "text": "u110",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "iconCls": "icon-man"
? ? ? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "id": "5",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "text": "u120",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "iconCls": "icon-man"
? ? ? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "id": "51",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "text": "u120",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "iconCls": "icon-man"
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? "id": "6",
? ? ? ? ? ? ? ? ? ? ? ? "text": "財務(wù)",
? ? ? ? ? ? ? ? ? ? ? ? "iconCls": "icon-org",
? ? ? ? ? ? ? ? ? ? ? ? "state": "closed",
? ? ? ? ? ? ? ? ? ? ? ? "children": [
? ? ? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "id": "7",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "text": "u111",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "iconCls": "icon-man"
? ? ? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "id": "71",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "text": "u111",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "iconCls": "icon-man"
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ]
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? ? "id": "8",
? ? ? ? ? ? ? ? "text": "建筑工程部",
? ? ? ? ? ? ? ? "iconCls": "icon-org",
? ? ? ? ? ? ? ? "state": "closed",
? ? ? ? ? ? ? ? "children": [
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? "id": "9",
? ? ? ? ? ? ? ? ? ? ? ? "text": "科室一",
? ? ? ? ? ? ? ? ? ? ? ? "iconCls": "icon-org",
? ? ? ? ? ? ? ? ? ? ? ? "state": "closed",
? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? "id": "11",
? ? ? ? ? ? ? ? ? ? ? ? "text": "財務(wù)",
? ? ? ? ? ? ? ? ? ? ? ? "iconCls": "icon-org",
? ? ? ? ? ? ? ? ? ? ? ? "state": "closed",
? ? ? ? ? ? ? ? ? ? ? ? "children": [
? ? ? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "id": "12",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "text": "u114",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "iconCls": "icon-man"
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ]
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? ? "id": "13",
? ? ? ? ? ? ? ? "text": "綜合室",
? ? ? ? ? ? ? ? "iconCls": "icon-org",
? ? ? ? ? ? ? ? "state": "closed",
? ? ? ? ? ? ? ? "children": [
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? "id": "14",
? ? ? ? ? ? ? ? ? ? ? ? "text": "u113",
? ? ? ? ? ? ? ? ? ? ? ? "iconCls": "icon-man"
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? "id": "141",
? ? ? ? ? ? ? ? ? ? ? ? "text": "u113",
? ? ? ? ? ? ? ? ? ? ? ? "iconCls": "icon-man"
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ]
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? ? "id": "15",
? ? ? ? ? ? ? ? "text": "重慶公司",
? ? ? ? ? ? ? ? "iconCls": "icon-org",
? ? ? ? ? ? ? ? "state": "closed",
? ? ? ? ? ? ? ? "children": [
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? "id": "16",
? ? ? ? ? ? ? ? ? ? ? ? "text": "土木工程部",
? ? ? ? ? ? ? ? ? ? ? ? "iconCls": "icon-org",
? ? ? ? ? ? ? ? ? ? ? ? "state": "closed",
? ? ? ? ? ? ? ? ? ? ? ? "children": [
? ? ? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "id": "17",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "text": "科室一",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "iconCls": "icon-org",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "state": "closed",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "children": [
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "id": "18",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "text": "u115",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "iconCls": "icon-man"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "id": "19",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "text": "財務(wù)",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "iconCls": "icon-org",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "state": "closed",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "children": [
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "id": "20",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "text": "張文濤",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "iconCls": "icon-man"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ]
? },
? ? {
? ? ? ? "id": "21",
? ? ? ? "text": "建筑工程部",
? ? ? ? "iconCls": "icon-org",
? ? ? ? "state": "closed",
? ? ? ? "children": [
? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? {
? ? ? ? ? ? ? "id": "24",
? ? ? ? ? ? ? "text": "財務(wù)",
? ? ? ? ? ? ? "iconCls": "icon-org",
? ? ? ? ? ? ? "state": "closed",
? ? ? ? ? ? ? "children": [
? ? ? ? ? ? ? {
? ? ? ? ? ? ? "id": "25",
? ? ? ? ? ? ? "text": "李小進",
? ? ? ? ? ? ? "iconCls": "icon-man"
? ? ? ? ? ? ?? }
? ? ? ? ? ? ]
? ? ? ? ? }
? ? ? ? ? ]
? ? ? }
? ? ]
? }
]
}
];
?
$.ajax({
? ? url: 'scripts/text.json',
? ? type: 'GET',
? ? dataType: 'json',
? ? data: {},
})
.done(function() {
? ? console.log("success");
? ? myjson=tree_json;
? ? showTopo();
})
.fail(function() {
? ? console.log("error");
})
.always(function() {
? ? console.log("complete");
});
?
?
?
function showTopo(){
?
?? ?$("#top_server").css({"left":"50%","top":"5%"});
?
? ? $(document).on({
? ? ? ? mouseover:function(){$(this).css({"background-color":"#79deff","box-shadow":"#909090 0px 0px 10px",
? ? ? ? ? ? "-webkit-box-shadow": "#909090 0px 0px 10px","-moz-box-shadow": "#909090 0px 0px 10px"});},
? ? ? ? mouseout:function(){$(this).css({"background-color":"","box-shadow":"",
? ? ? ? ? ? "-webkit-box-shadow": "","-moz-box-shadow": ""});},
? ? ? ? click:function(){alert($(this).text());}
? ? },".instanceNode_leaf");
?
?
?? ??? ??? ? var company=myjson[0]["children"]; ?//初始化 ?公司數(shù)組
?? ??? ??? ? var companyNumber=company.length; ? //
? ? ? ? ? ? ?var company_department_arr=[]; ? ? ? ? //獲取部門數(shù)組
? ? ? ? ? ? ?var company_department_sec_arr=[]; ? ? //獲取科室數(shù)組
?
?? ??? ??? ? //元素的擺放 先擺放公司 部門 科室 員工?
?? ??? ??? ? if(tree_json[0].hasOwnProperty("children")){
?
?? ??? ??? ? ?? ?elementLocation(company,companyNumber);
?? ??? ??? ? }
?? ??? ??? ??
? ? ? ? ? ? ?//開始定義連線和點擊事件
?? ??? ??? ? jsPlumb.ready(function() {
?
?? ??? ??? ??? ?jsPlumb.draggable("top_server"); ? ? ? ?//定義可拖拽
?
?? ??? ??? ??? ?var hoverPaintStyle = { lineWidth:2,strokeStyle:"#dedede" }; ?//鼠標經(jīng)過時線寬度和顏色
?
?? ??? ??? ??? ?jsPlumb.importDefaults({ ?
?? ??? ??? ??? ? ? ?DragOptions : { cursor: 'pointer'}, //拖動時鼠標停留在該元素上顯示指針，通過css控制 ?
?? ??? ??? ??? ? ? ?EndpointStyles : { width:10, height:10,cursor: 'pointer'},//連接點的默認顏色 ?
?? ??? ??? ??? ? ? ?Connector : "Straight", //設(shè)置連線為直線 ?
?? ??? ??? ??? ? ? ?Endpoint : "Rectangle",//連接點的默認形狀 ?
?? ??? ??? ??? ? ? ?Anchor : "Top",//連接點的默認位置 ?
?? ??? ??? ??? ? ? ?MaxConnections:1000,//同上 ?
?? ??? ??? ??? ??? ?ConnectionsDetachable:false,
?? ??? ??? ??? ??? ?HoverPaintStyle:hoverPaintStyle
?? ??? ??? ??? ?}); ?
?? ??? ??? ??? ?var defaults = { ?
?? ??? ??? ??? ? ? ?paintStyle:{ fillStyle:"#B4B9C5" },//設(shè)置連接點的顏色 ?
?? ??? ??? ??? ? ? ?connectorStyle:{ strokeStyle:"#B4B9C5", lineWidth:2 },//連線顏色、粗細 ?
?? ??? ??? ??? ? ? ?connector:[ "Flowchart", { stub:[10, 20], gap:5, cornerRadius:2} ],
?? ??? ??? ??? ? ? ?isSource:true,
?? ??? ??? ??? ? ? ?isTarget:true,
?? ??? ??? ??? ? ? ?endpoint:"Blank"
?? ??? ??? ??? ?};?
?
?? ??? ??? ??? ?var rootnode={
?? ??? ??? ??? ??? ?endpoint:["Image", { src:"images/sub.png" }],//設(shè)置連接點的形狀為圓形 ?
?? ??? ??? ??? ? ? ?paintStyle:{ fillStyle:"#B4B9C5" },//設(shè)置連接點的顏色 ?
?? ??? ??? ??? ? ? ?connectorStyle:{ strokeStyle:"green", lineWidth:2 },//連線顏色、粗細 ?
?? ??? ??? ??? ? ? ?//connector:["Straight",{gap:5}],
?? ??? ??? ??? ? ? ?connector:[ "Flowchart", { stub:[10, 20], gap:10, cornerRadius:2} ],
?? ??? ??? ??? ? ? ?cssClass:"cursorEndpoint"
?? ??? ??? ??? ?};
?? ??? ??? ?
?
?? ??? ? ? ? ?var s1=jsPlumb.addEndpoint("top_server", {anchor:"Bottom"},rootnode);//根節(jié)點設(shè)置?
? ? ? ? ? ? ? //添加拓撲關(guān)系
? ? ? ? ? ? ? for(var i=0;i<companyNumber;i++){ ?
? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ?var company_department=company[i].children; ?//四個公司下面的部門
? ? ? ? ? ? ? ? ? ? ? ?jsPlumb.draggable("instance_"+company[i].id); ?//設(shè)置四個公司可拖拽
? ? ? ? ? ? ? ? ? ? ? ?var s2=jsPlumb.addEndpoint("instance_"+company[i].id,defaults); ? //設(shè)置四個公司的節(jié)點
? ? ? ? ? ? ? ? ? ? ? ?jsPlumb.connect({source:s1, target:s2}); ? ? ? ? ? ? ? ? ? ? ? ? ?//連接服務(wù)器和是個公司;
? ? ? ? ? ? ? ? ? ? ? ?if(company_department.length>0){
?
? ? ? ? ? ? ? ? ? ? ? ? ? var s2_root=jsPlumb.addEndpoint("instance_"+company[i].id, {anchor:"Bottom"},rootnode); ?//把四個公司設(shè)置成根節(jié)點
? ? ? ? ? ? ? ? ? ? ? ? ? ? //對公司綁定click事件
? ? ? ? ? ? ? ? ? ? ? ? ? ? s2_root.bind("click", function(endpoint) {?
? ? ? ? ? ? ? ? ? ? ? ? ? ? if(endpoint.getParameter("img")&&endpoint.getParameter("img")=="add"){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? endpoint.setParameter("img","sub");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? endpoint.setImage("images/sub.png");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? for(var k=0;k<endpoint.connections.length;k++){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? endpoint.connections[k].setVisible(true);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? $("#"+endpoint.connections[k].targetId).show();
?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?var oid=endpoint.connections[k].targetId.split("_")[1];
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?jsPlumb.show("instance_"+oid,true);
? ? ? ? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ?//隱藏其他部門以及部門下的組織
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? for(var m=0;m<company.length;m++){?
? ? ? ? ? ? ?if(endpoint.elementId!="instance_"+company[m].id){ ? ??
? ? ? ? ? ? ? ?var conn=jsPlumb.select({source:"instance_"+company[m].id});
? ? ? ? ? ? ? ? for(var n=0;n<conn.length;n++){
? ? ? ? ? ? ? ? ?$("#"+conn.get(n).targetId).hide();
? ? ? ? ? ? ? ? ? jsPlumb.hide(conn.get(n).targetId,true);
? ? ? ? ? ? ? ? ? var oid=conn.get(n).targetId.split("_")[1];
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
?
? ? ? ? ? ? ? ? ? var conn_org=jsPlumb.select({source:"instance_"+oid});
? ? ? ? ? ? ? ? ? ?for(var n1=0;n1<conn_org.length;n1++)
? ? ? ? ? ? ? ? ? ?{
? ? ? ? ? ? ? ? ?$("#"+conn_org.get(n1).targetId).hide();?
? ? ? ? ? ? ? ? ? jsPlumb.hide(conn_org.get(n1).targetId,true);
?
? ? ? ? ? ? ? ? ?var oid_1=conn_org.get(n1).targetId.split("_")[1]; ?
? ? ? ? ? ? ? ? ?var conn_org_l1=jsPlumb.select({source:"instance_"+oid_1});
? ? ? ? ? ? ? ? ? ? ?for(var nn1=0;nn1<conn_org_l1.length;nn1++)
? ? ? ? ? ? ? ? ? ? ?{
? ? ? ? ? ? ? ? ? ? ? ? $("#"+conn_org_l1.get(nn1).targetId).hide();?
? ? ? ? ? ? ? ? ? ? ? ??}
?
? ? ? ? ? ? ? ? ? ?? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? conn.get(0).endpoints[0].setParameter("img","add");
? ? ? ? ? ? ? ? conn.get(0).endpoints[0].setImage("images/add.png");
? ? ? ? ? ? ? ? conn.setVisible(false);
? ? ? ? ? ? ? ? ? }
?
? ? ? ? ? ? ? else
? ? ? ? ? ? {
? ? ? ? ? ? ? var company_department_orgnize=company[m].children;
? ? ? ? ? ? ? for(var kk=0;kk<company_department_orgnize.length;kk++)
? ? ? ? ? ? ?? {
? ? ? ? ? ? ? ? ? if(company_department_orgnize[kk].hasOwnProperty("children"))
? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?jsPlumb.select({source:"instance_"+company_department_orgnize[kk].id}).setVisible(false);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?jsPlumb.select({source:"instance_"+company_department_orgnize[kk].id}).get(0).endpoints[0].setParameter("img","add");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?jsPlumb.select({source:"instance_"+company_department_orgnize[kk].id}).get(0).endpoints[0].setImage("images/add.png");?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ?? }
? ? ? ? ? ? }
?
? ? ? ? ? }
? ? ? }
? ? ?? }else{
? ? ? ? ?endpoint.setParameter("img","add");
? ? ? ? ?endpoint.setImage("images/add.png");
? ? ? ? for(var k=0;k<endpoint.connections.length;k++){
? ? ? ? ? endpoint.connections[k].setVisible(false);
? ? ? ? ? ?$("#"+endpoint.connections[k].targetId).hide();
? ? ? ? ? ?jsPlumb.hide(endpoint.connections[k].targetId,true);
? ? ? ? ? ? ? var oid=endpoint.connections[k].targetId.split("_")[1];
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
?
? ? ? ? ? ? ?var conn_org=jsPlumb.select({source:"instance_"+oid});
? ? ? ? ? ? ? ? ? for(var n1=0;n1<conn_org.length;n1++)
? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? $("#"+conn_org.get(n1).targetId).hide();?
? ? ? ? ? ? ? ? ? ? ? ? jsPlumb.hide(conn_org.get(n1).targetId,true);
?
? ? ? ? ? ? ? ? ? ? ? ? var oid_1=conn_org.get(n1).targetId.split("_")[1]; ?
? ? ? ? ? ? ? ? ? ? ? ? var conn_org_l1=jsPlumb.select({source:"instance_"+oid_1});
? ? ? ? ? ? ? ? ? ? ? ? for(var nn1=0;nn1<conn_org_l1.length;nn1++)
? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?$("#"+conn_org_l1.get(nn1).targetId).hide();?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? if (window.navigator.userAgent.indexOf('MSIE') > -1) { ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? jsPlumb.repaintEverything();
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? ? ? ? ? ? ??
??//添加部門拓撲關(guān)系，也就是連接公司到部門,遍歷部門
? ? for(var i1=0;i1<company_department.length;i1++)
? ? ? ? ? {
? ? ? ? var company_department_orgnize=company_department[i1].children; ?//四個公司下面的部門的組織
?
? ? ? ? jsPlumb.draggable("instance_"+company_department[i1].id); ?//設(shè)置部門可拖拽
? ? ? ? var s3=jsPlumb.addEndpoint("instance_"+company_department[i1].id,defaults); ? //設(shè)置部門的節(jié)點
? ? ? ? jsPlumb.connect({source:s2_root, target:s3}); ? //連接四個公司到部門
? ? ? ? ?? company_department_arr.push(company_department[i1]);
? ? ? ? ? ?if(company_department[i1].hasOwnProperty("children")){?
?
? ? ? ? ? ?var s3_root=jsPlumb.addEndpoint("instance_"+company_department[i1].id, {anchor:"Bottom"},rootnode); ?//把部門設(shè)置成根節(jié)點
? ? ? ? ? //對部門綁定click事件
? ? ? ? ? ??s3_root.bind("click", function(endpoint) {?
? ? ? ? ? ? ?if(endpoint.getParameter("img")&&endpoint.getParameter("img")=="add"){
? ? ? ? ? ? ? ?endpoint.setParameter("img","sub");
? ? ? ? ? ? ? ?endpoint.setImage("images/sub.png");
? ? ? ? ? ? ? ?for(var k1=0;k1<endpoint.connections.length;k1++){?
? ? ? ? ? ? ? ? ? ? endpoint.connections[k1].setVisible(true);
? ? ? ? ? ? ? ? ? ? ? $("#"+endpoint.connections[k1].targetId).show();
?
? ? ? ? ? ? ? ? ? ? ? var oid1=endpoint.connections[k1].targetId.split("_")[1];?
?
? ? ? ? ? ? ? ? ? ? ? jsPlumb.show("instance_"+oid1,true);
? ? ? ? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? ? $("#instance_"+oid1).show();?
?
?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
}
? ? //隱藏其他部門下的科室
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
? ? for(var mm=0;mm<company_department_arr.length;mm++){?
? ? ? ?if(endpoint.elementId!="instance_"+company_department_arr[mm].id){?
? ? ? ? ? var conn_org1=jsPlumb.select({source:"instance_"+company_department_arr[mm].id});
?
? ? ? ? ? ? ?if(company_department_arr[mm].hasOwnProperty("children"))
? ? ? ? ? ? ? ? {
?
? for(var nn=0;nn<conn_org1.length;nn++){
? ? ? ? ? ? ? ? ? $("#"+conn_org1.get(nn).targetId).hide();
? ? ? ? ? ? ? ? ? jsPlumb.hide(conn_org1.get(nn).targetId,true);
? ? ? ? ? ? ? ? ? var oid_s=conn_org1.get(nn).targetId.split("_")[1];
?
? ? ? ? ? ? ? ? ?var conn_org_l2=jsPlumb.select({source:"instance_"+oid_s});?
? ? ? ? ? ? ? ? ? for(var nnn1=0;nnn1<conn_org_l2.length;nnn1++)
? ? ? ? ? ? ? ? ? ? ? ?{ ??
? ? ? ? ? ? ? ? ? ? ? ?$("#"+conn_org_l2.get(nnn1).targetId).hide();
?
? ? ? ? ? ? ? ? ? ? ? jsPlumb.hide(conn_org_l2.get(nnn1).targetId,true);
?
?
? ? ? ? ? ? ? ? ? ? ? var oid_11=conn_org_l2.get(nnn1).targetId.split("_")[1]; ?
? ? ? ? ? ? ? ? ? ? ? var conn_org_l11=jsPlumb.select({source:"instance_"+oid_11});
? ? ? ? ? ? ? ? ? ? ? for(var nnn2=0;nnn2<conn_org_l11.length;nnn2++)
? ? ? ? ? ? ? ? ? ? ? ? ? {?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?$("#"+conn_org_l11.get(nnn2).targetId).hide();?
? ? ? ? ? ? ? ? ? ? ? ? }
?
?
? ? ? ? ? ? ? ?}
?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
}
?
? conn_org1.get(0).endpoints[0].setParameter("img","add");
? ? ? ? ?conn_org1.get(0).endpoints[0].setImage("images/add.png");
? ? ? ? ?conn_org1.setVisible(false);
? ? ? ? ? ? ? ?? }
? ?? }
?
? ? ? else
? ? ? { ??
? ? ? ? ? ?var company_department_orgnize_sec=company_department_arr[mm].children;
? ? ? ? ? ?for(var kkk=0;kkk<company_department_orgnize_sec.length;kkk++)
? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? if(company_department_orgnize_sec[kkk].hasOwnProperty("children"))
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?jsPlumb.select({source:"instance_"+company_department_orgnize_sec[kkk].id}).setVisible(false); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?jsPlumb.select({source:"instance_"+company_department_orgnize_sec[kkk].id}).get(0).endpoints[0].setParameter("img","add"); ? ? ? ? ?jsPlumb.select({source:"instance_"+company_department_orgnize_sec[kkk].id}).get(0).endpoints[0].setImage("images/add.png");?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? }else{
? ? ? ? ? endpoint.setParameter("img","add");?
? ? ? ? ? endpoint.setImage("images/add.png");
? ? ? ? ? ?for(var k1=0;k1<endpoint.connections.length;k1++){
? ? ? ? ? ? endpoint.connections[k1].setVisible(false);
? ? ? ? ? ? $("#"+endpoint.connections[k1].targetId).hide();
? ? ? ? ? ? jsPlumb.hide(endpoint.connections[k1].targetId,true);
? ? ? ? ? ? var oidss=endpoint.connections[k1].targetId.split("_")[1];
?
? ? ? ? ? ?var conn_org_l2=jsPlumb.select({source:"instance_"+oidss});
? ? ? ? ? ? ?for(var nnn1=0;nnn1<conn_org_l2.length;nnn1++)
? ? ? ? ? ? ? ? ? ? ?{
? ? ? ? ? ? ? ? ? ? ? $("#"+conn_org_l2.get(nnn1).targetId).hide();
?
? ? ? ? ? ? ? ? ? ? ?jsPlumb.hide(conn_org_l2.get(nnn1).targetId,true);
?
?
? ? ? ? ? ? ? ? ? ? ??var oid_11=conn_org_l2.get(nnn1).targetId.split("_")[1]; ?
? ? ? ? ? ? ? ? ? ? ? var conn_org_l11=jsPlumb.select({source:"instance_"+oid_11});
? ? ? ? ? ? ? ? ? ? ? for(var nnn2=0;nnn2<conn_org_l11.length;nnn2++)
? ? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ?$("#"+conn_org_l11.get(nnn2).targetId).hide();?
? ? ? ? ? ? ? ? ? ? ? ? }
?
?
? ? ? ? ? ? ? ?}?
?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? if (window.navigator.userAgent.indexOf('MSIE') > -1) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? jsPlumb.repaintEverything();
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? ? ? ? ? ? ??
?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//添加科室拓撲關(guān)系，也就是連接部門到科室;
? ? ? ? ? ? ? ? ? ? ? ? ? ? for(var i2=0;i2<company_department_orgnize.length;i2++)
? ? ? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var staff=company_department_orgnize[i2].children; ?//組織下面的個人
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? jsPlumb.draggable("instance_"+company_department_orgnize[i2].id); ?//設(shè)置組織可拖拽
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var s4=jsPlumb.addEndpoint("instance_"+company_department_orgnize[i2].id,defaults); ? //設(shè)置組織的節(jié)點
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? jsPlumb.connect({source:s3_root, target:s4}); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //連接連接部門到組織
?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? company_department_sec_arr.push(company_department_orgnize[i2]);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(company_department_orgnize[i2].hasOwnProperty("children"))
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?var s4_root=jsPlumb.addEndpoint("instance_"+company_department_orgnize[i2].id, {anchor:"Bottom"},rootnode); ?//把組織設(shè)置成根節(jié)點
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//綁定科室點擊事件
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? s4_root.bind("click", function(endpoint) {?
? ? ? ? ? ? ? ? ? ? ? ? ? ? if(endpoint.getParameter("img")&&endpoint.getParameter("img")=="add"){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? endpoint.setParameter("img","sub");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? endpoint.setImage("images/sub.png");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? for(var k2=0;k2<endpoint.connections.length;k2++){?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? endpoint.connections[k2].setVisible(true);
? ? ? ? ? ? ? ? ? ? $("#"+endpoint.connections[k2].targetId).show();
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? }
? ?//隱藏其他科室下的人
? ? ? ? for(var mmm=0;mmm<company_department_sec_arr.length;mmm++){?
? ? ? ? ? ? ? if(endpoint.elementId!="instance_"+company_department_sec_arr[mmm].id){
? ? ? ? ? ? ? var conn_org_2=jsPlumb.select({source:"instance_"+company_department_sec_arr[mmm].id});
?
? ? ? ? ? ? ??if(company_department_sec_arr[mmm].hasOwnProperty("children"))
? ? ? ? ? ? ? ? ?{
? ? ? ? ? ? ? ? ? ? for(var nn1=0;nn1<conn_org_2.length;nn1++){
? ? ? ? ? ? ? ? ? ? $("#"+conn_org_2.get(nn1).targetId).hide();
? ? ? ? ? ? ? ? ? ? jsPlumb.hide(conn_org_2.get(nn1).targetId,true);
? ? ? ? ? ? ? ? ? ? //var oid=conn_org_2.get(nn1).targetId.split("_")[1];?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
?
? ? ? ? ? ? ? ? conn_org_2.get(0).endpoints[0].setParameter("img","add");
? ? ? ? ? ? ? ? conn_org_2.get(0).endpoints[0].setImage("images/add.png");
? ? ? ? ? ? ? ? conn_org_2.setVisible(false);
? ? ? ? ? ? ? ? ?? }
? ? ? ? }
? ? ? }
? }else{
? ? ? ? ? ? endpoint.setParameter("img","add");
? ? ? ? ? ? endpoint.setImage("images/add.png");
? ? ? ? ? ? ? ? ?for(var k2=0;k2<endpoint.connections.length;k2++){
? ? ? ? ? ? ? ? ? ? endpoint.connections[k2].setVisible(false);
? ? ? ? ? ? ? ? ? ? $("#"+endpoint.connections[k2].targetId).hide();
? ? ? ? ? ? ? ? ? ? jsPlumb.hide(endpoint.connections[k2].targetId,true);
? ? ? ? ? ? ? ? ? ? var oid=endpoint.connections[k2].targetId.split("_")[1];
? ? ? ? ? ? ? ? ? ? //$("div[id*=_"+oid+"_]").hide();
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? if (window.navigator.userAgent.indexOf('MSIE') > -1) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? jsPlumb.repaintEverything();
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? for(var i3=0;i3<staff.length;i3++)
? ? ? ? ? ? ?? {
? ? ? ? ? ? ? ? ? //var staff=company_department_orgnize[i2].children; ?//組織下面的個人
? ? ? ? ? ? ? ? ? jsPlumb.draggable("instance_"+staff[i3].id); ?//設(shè)置組織可拖拽
? ? ? ? ? ? ? ? ? var s5=jsPlumb.addEndpoint("instance_"+staff[i3].id,defaults); ? //設(shè)置組織的節(jié)點
? ? ? ? ? ? ? ? ? jsPlumb.connect({source:s4_root, target:s5}); ? //連接連接部門到組織
?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ?}?
?
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? }
?
? ? ? ? ? ? ? }
?
s1.bind("click", function(endpoint) {
? ? if(endpoint.getParameter("img")&&endpoint.getParameter("img")=="add"){
? ? ? ? ? ? endpoint.setParameter("img","sub");
? ? ? ? ? ? endpoint.setImage("images/sub.png");
? ? ? ? ? ? ?jsPlumb.select({source:"top_server"}).setVisible(true);?
? ? ? ? ? ? ? ?for(var i=0;i<company.length;i++){
? ? ? ? ? ? ? ? ? ? ? ? ? ? jsPlumb.show("instance_"+company[i].id,true);
? ? ? ? ? ? ? ? ? ? ? ? ? ? $("#instance_"+company[i].id).show();
? ? ? ? ? ? ? ? ? ? ? ? ? ? var company_department=company[i].children; //alert(company[i].id);?
? ? ? ? ? ? ? ? ? ? ? ? ? ? if(company_department.length>0){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? jsPlumb.select({source:"instance_"+company[i].id}).setVisible(false);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? jsPlumb.select({source:"instance_"+company[i].id}).get(0).endpoints[0].setParameter("img","add");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? jsPlumb.select({source:"instance_"+company[i].id}).get(0).endpoints[0].setImage("images/add.png");
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? endpoint.setParameter("img","add");
? ? ? ? ? ? endpoint.setImage("images/add.png");
? ? ? ? ? ? ? jsPlumb.hide("top_server");
? ? ? ? ? ? ? for(var i=0;i<company.length;i++){
? ? ? ? ? ? ? ? ? var company_department=company[i].children;
? ? ? ? ? ? ? ? ? jsPlumb.hide("instance_"+company[i].id,true);
? ? ? ? ? ? ? ? ? for(var j=0;j<company_department.length;j++){
? ? ? ? ? ? ? ? ? ? ? jsPlumb.hide("instance_"+company_department[j].id,true);
? ? ? ? ? ? ? ? ? ? ? if(company_department[j].hasOwnProperty("children"))
? ? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var orgnize=company_department[j].children;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?for(var j1=0;j1<orgnize.length;j1++)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? jsPlumb.hide("instance_"+orgnize[j1].id,true);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
?
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? $(".nodeWord").parent().hide();
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? if (window.navigator.userAgent.indexOf('MSIE') > -1) {
? ? ? ? ? ? ? ? ? ? ? ? jsPlumb.repaintEverything();
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? });
? ? ?
?
? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ??
?
? ? ? ? ? ? ? ? ? $(window).resize(function(){
? ? ? ? ? ? ? ? ? ? jsPlumb.repaintEverything();
? ? ? ? ? ? ? ? });
?
?? ??? ? ? ??
?? ??? ??? ?
?? ??? ??? ? });
}
?
?
/*
?* 元素擺放位置--對稱分布
?*/
function elementLocation(nodeArr,nodeNumber){
?? ?if(nodeNumber%2==1){//總節(jié)點數(shù)是奇數(shù)
?? ??? ?
?? ??? ??? ?//var num=parseInt(nodeNumber/2);
?? ??? ??? ?for(var i=0;i<nodeArr.length;i++){ ?
?
? ? ? ? ? ?if(i<parseInt(nodeNumber/2)){
? ? ? ? ? ? ? ? leftLoc=50-10*(i+1);
? ? ? ? ? ??
? ? ? ? ? ? }else if(i>parseInt(nodeNumber/2)){?
? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? leftLoc=50+10*(i-parseInt(nodeNumber/2));?
? ? ? ? ? ? ? ??
? ? ? ? ? ? }else{
? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? leftLoc=50;
? ? ? ? ? ? ? ??
? ? ? ? ? ? }
?
?? ??? ??? ??? ?if(nodeArr[i].hasOwnProperty("children")){
?
?? ??? ??? ??? ??? ?var html="<div id='instance_"+nodeArr[i].id+"' class=\"instanceNode\" style='top:20%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+nodeArr[i].text+"</div></div>";
?? ??? ??? ??? ?$("body").append(html);
?
?? ??? ??? ??? ?var companyLoc=leftLoc; ?//在本例中表示公司橫向定位，做這個是方便公司下面的部門定位；
?? ??? ??? ??? ?var companyDepartArr=nodeArr[i].children;
? ? ? ? ? ? ? ? var companyDepartArrLength=companyDepartArr.length;
?? ??? ??? ??? ? ? ?companyDepartLocation(companyLoc,companyDepartArr,companyDepartArrLength); ?//部門定位
?
?? ??? ??? ??? ?}
?
?? ??? ??? ??? ?else{
?? ??? ??? ??? ??? ?var html="<div id='instance_"+nodeArr[i].id+"' class=\"instanceNode_leaf\" style='top:20%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+nodeArr[i].text+"</div></div>";
?? ??? ??? ??? ?$("body").append(html);
?? ??? ??? ??? ?}
?? ??? ??? ??? ?
?? ??? ??? ?}
?? ??? ?
?? ??? ?
?? ?}else if(nodeNumber%2==0){//總節(jié)點數(shù)是偶數(shù)
?? ?
?? ??? ??? ?//var num=parseInt(nodeNumber/2);
?? ??? ??? ?for(var i=0;i<nodeArr.length;i++){
?
? ? ? ? ? ? ? ? ? ? if(i+1<=parseInt(nodeNumber/2)){?
? ? ? ? ? ? ? ? leftLoc=50-5-10*i;?
? ? ? ? ? ??
? ? ? ? ? ? }
? ? ? ? ? ? else if(i+1>parseInt(nodeNumber/2)){?
? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? leftLoc=50+5+10*(i-parseInt(nodeNumber/2));
? ? ? ? ? ? ? ??
? ? ? ? ? ? }
?
?? ??? ??? ??? ?if(nodeArr[i].hasOwnProperty("children")){
?? ??? ??? ??? ??? ?var html="<div id='instance_"+nodeArr[i].id+"' class=\"instanceNode\" style='top:20%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+nodeArr[i].text+"</div></div>";
?? ??? ??? ??? ?$("body").append(html);
?? ??? ??? ??? ?var companyLoc = leftLoc;
?? ??? ??? ??? ?var companyDepartArr=nodeArr[i].children;
? ? ? ? ? ? ? ? var companyDepartArrLength=companyDepartArr.length;
?? ??? ??? ??? ? ? ?companyDepartLocation(companyLoc,companyDepartArr,companyDepartArrLength); ?//部門定位
?? ??? ??? ??? ?}
?? ??? ??? ??? ?else
?? ??? ??? ??? ?{
?? ??? ??? ??? ??? ?var html="<div id='instance_"+nodeArr[i].id+"' class=\"instanceNode_leaf\" style='top:20%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+nodeArr[i].text+"</div></div>";
?? ??? ??? ??? ?$("body").append(html);
?? ??? ??? ??? ?}
?? ??? ??? ??? ?
?? ??? ??? ?}
?? ??? ?
?? ??? ?
?? ?}
}
?
//部門定位
function companyDepartLocation(nodeLoc,nodeArr,nodeNumber){
?? ?if(nodeNumber%2==1){
?? ??? ?for(var j=0;j<nodeNumber;j++){
?? ??? ??? ?var department=nodeArr[j],leftLoc;
?? ??? ??? ?if(j<parseInt(nodeNumber/2)){
?? ??? ??? ??? ?leftLoc=nodeLoc-5*(j+1);
?? ??? ??? ?
?? ??? ??? ?}
?? ??? ??? ?else if(j>parseInt(nodeNumber/2)){
?? ??? ??? ??? ?
?? ??? ??? ??? ??? ?leftLoc=nodeLoc+5*j;
?? ??? ??? ??? ?
?? ??? ??? ?}
?? ??? ??? ?else{
?? ??? ??? ??? ?
?? ??? ??? ?
?? ??? ??? ??? ??? ?leftLoc=nodeLoc;
?? ??? ??? ??? ?
?? ??? ??? ?}
?
?
?? ??? ??? ?if(department.hasOwnProperty("children")){
?
?? ??? ??? ??? ?var html="<div id='instance_"+department.id+"' class='instanceNode' style='top:40%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+department.text+"</div></div>";
?? ? ? ? ? ? ? ?$("body").append(html);
?? ? ? ? ? ? ? ?var departmentOrgnize=department.children;
? ? ? ? ? ? ? ? var departmentOrgnizeLength=departmentOrgnize.length;
?? ? ? ? ? ? ? ?var departmentOrgnizeLoc=leftLoc;
?? ? ? ? ? ? ? ? departmentOrgnizeLocation(departmentOrgnizeLoc,departmentOrgnize,departmentOrgnizeLength); ?//組織定位
?? ??? ??? ?}
?
?? ??? ??? ?else{
?
?? ??? ??? ??? ?var html="<div id='instance_"+department.id+"' class='instanceNode_leaf' style='top:40%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+department.text+"</div></div>";
?? ? ? ? ? ? ? ?$("body").append(html);
?
?? ??? ??? ?}
?? ??? ??? ?
?
?? ? ? ? ?
?
?? ??? ?}
?? ?}else if(nodeNumber%2==0){?
?
?? ??? ?for(var j=0;j<nodeNumber;j++){
?
?? ??? ??? ?var department=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(department.hasOwnProperty("children")){
?
?
?? ??? ??? ?var html="<div id='instance_"+department.id+"' class='instanceNode' style='top:40%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+department.text+"</div></div>";
?? ? ? ? ? ? ? ? ?$("body").append(html);
?
?? ? ? ? ? ? ? ? ? var departmentOrgnize=department.children;
? ? ? ? ? ? ? ? ? ?var departmentOrgnizeLength=departmentOrgnize.length;
? ? ? ? ? ? ? ? ? ?var departmentOrgnizeLoc=leftLoc; ?
? ? ? ? ? ? ? ? ? ?departmentOrgnizeLocation(departmentOrgnizeLoc,departmentOrgnize,departmentOrgnizeLength); ?//組織定位
?? ? ? ? ? ? ? ? ?
?
?? ??? ??? ?}
?
?? ??? ??? ?else
?? ??? ??? ?{
?? ??? ??? ??? ?var html="<div id='instance_"+department.id+"' class='instanceNode_leaf' style='top:40%;left:"+parseInt(leftLoc)+"%'><div class='nodeWord'>"+department.text+"</div></div>";
?? ? ? ? ? ? ? ? ?$("body").append(html);
?
?? ??? ??? ?}
?
?
?? ??? ?}
?? ?}
}
?
//組織定位
function departmentOrgnizeLocation(nodeLoc,nodeArr,nodeNumber){?
?
? ? ? ? ? ? if(nodeNumber%2==1){
?? ??? ?
?? ??? ?for(var j=0;j<nodeNumber;j++){
?? ??? ??? ?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、最后的效果
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了jQuery實現(xiàn)圖片走馬燈效果的原理,結(jié)合實例形式較為詳細的分析了jQuery實現(xiàn)走馬燈的相關(guān)html頁面設(shè)計、css樣式布局與jQuery相關(guān)函數(shù)的使用,需要的朋友可以參考下2016-01-01
Jquery幻燈片特效代碼分享 打開頁面隨機選擇切換方式（3）
jQuery是一個非常優(yōu)秀的 JavaScript 框架，使用簡單靈活，一個漂亮的幻燈片更能吸引訪客的注意力。本文實例講述了jQuery實現(xiàn)時尚漂亮的幻燈片特效，基本能滿足你在網(wǎng)頁上使用幻燈片(焦點圖)效果。分享給大家供大家參考。具體如下：2015-08-08
有個需求就是異步驗證用戶名是否存在。用的技術(shù)是jQuery異步驗證和struts2，大家可以參考下2014-05-05
這篇文章主要介紹了jQuery中index()方法用法,實例分析了index()方法返回索引值的幾種常見使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2014-12-12
很多網(wǎng)站上面有頂一下，踩一下效果是直接用別人做好的插件放上去的，上星期正好要用到這個效果，就去研究了下。下面就一步一步來實現(xiàn)整個效果。。。。2010-07-07
這篇文章主要介紹了jQuery操作事件,結(jié)合完整實例形式分析了jquery事件綁定、解綁、響應(yīng)、觸發(fā)等相關(guān)操作技巧,需要的朋友可以參考下2020-01-01
這篇文章主要介紹了jQuery實現(xiàn)的自定義輪播圖功能,結(jié)合實例形式詳細分析了輪播圖的原理、實現(xiàn)步驟及相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
在網(wǎng)上看到許多的jquery插件實現(xiàn)滾動新聞，特別是新聞顯示在div里面的，比較了一番發(fā)現(xiàn)這款jquery.vticker-min.js還是挺不錯的，于是就將它集成到我的畢業(yè)設(shè)計里面。2010-06-06
這篇文章主要介紹了jQuery zTree如何改變指定節(jié)點文本樣式,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-10-10
父級以及同級元素的查找在使用過程中還是蠻頻繁的，下面為大家介紹下jQuery是如何實現(xiàn)的，感興趣的朋友可以參考下2013-09-09