JsPlumb初始化和添加连线、端点等

项目背景：项目上需要通过JsPlumb连线库表示两个表的关联关系，效果图如下：

左侧为数据仓库中的表分类，右侧上为模型设计区，下为数据预览区。

下面展示jsPlumb的初始化代码

jsPlumb.ready(function() {
    var color = "#E8C870";
    var instance = jsPlumb.getInstance({   
      Connector : [ "Flowchart", { curviness:50 } ],//连线类型，有直线，折线等，我这只用直线
      DragOptions : { cursor: "pointer", zIndex:2000 },//拖动的时候
      PaintStyle : { strokeStyle:color, lineWidth:2 },
      EndpointStyle : { radius:5, fillStyle:color },
      HoverPaintStyle : {strokeStyle:"#7073EB" },
      EndpointHoverStyle : {fillStyle:"#7073EB" },
      ConnectionOverlays:[
      [ "Label", { label:"关联",cssClass:"csslabel"} ]//这个是鼠标拉出来的线的属性
      ],
      Container:"flow-panel",//容器位置
    });
  
    //通过模型ID获取模型信息包括点和连线
    //----添加点	 
    for(var i=0;i<nodes.length;i++){
	//添加各个表结点
    }
    //点击连接时的触发事件
    instance.bind("click", function (c) { 
     //触发点击事件时
    });    
    instance.bind("connection", function (info) {
     ///两个表进行关联时
     }); 
    //自动避免连线源锚点和目标锚点在同一节点上
    instance.bind('beforeDrop', function (conn) {
        if (conn.sourceId === conn.targetId) {
          return false
        } else {
          return true
        }
      })
    //开始添加线
    instance.unbind("connection");//取消连接事件
    for(var i=0;i<lxs.length;i++){
    	//初始化连线
    }
    instance.bind("connection", function (info) {    
	//再次绑定连接事件
    });
    
    instance.bind("connectionDetached", function (info) {  
	//断开连接时的触发事件}); 
    //完成初始化
    jsPlumb.fire("jsFlowLoaded", instance);
});

拖拽左侧树上的表进设计区可以添加表结点：

树拖拽触发的事件：

	function onDrop(event, treeId, treeNodes, targetNode, moveType, isCopy) {
		if(event.target.id=="flow-panel"){
			//保存表结点，并刷新Div，具体怎么刷新div,详见上篇blog
		}else{
			alertMsg("请拖入设计区");
		}
		return true ;
	}

添加表结点的方法：

function addNode(parentId, nodeId, nodeLable, position,tablename) {
	  var Lable=nodeLable;
	  if(nodeLable.length>6){
		  Lable=nodeLable.substring(0,6) + "...";
	  }
	  var divht="<div  style=\"background:#3083eb;color:#fff;width: 100px; height: 50px; position: absolute; top: "+position.y+"; left: "+position.x+"; border: 2px solid #3083eb;border-radius:5px; z-index: auto;vertical-align:middle;\" id=\""+nodeId+"\" class=\"node\" align=\"center\" ondblclick=\"showMessageDialog('"+nodeId+"','"+nodeLable+"','"+tablename+"');\" oncontextmenu=\"return false;\">"+"<div class=\"delte\" title=\"删除表结点\"onclick=\"delnode('"+nodeId+"')\"><i class=\"fa fa-times\"></i> </div><span style='display:block;padding-top:15px;'>"+Lable+"</span><div class=\"tablenode\"></div></div>";
	  $('#flow-panel').append(divht);
	  return jsPlumb.getSelector('#' + nodeId)[0];
}

添加输入输出点：

function addPorts(instance, node, ports, type) {
  var number_of_ports = ports.length;
  var i = 0;
  var height = $(node).height();  //Note, jquery does not include border for height
  var y_offset = 1 / ( number_of_ports + 1);
  var y = 0;
  for ( ; i < number_of_ports; i++ ) {
    var anchor = [0,0,0,0];
    var paintStyle = { radius:5, fillStyle:'#FF8891' };
    var isSource = false, isTarget = false;
    if ( type === 'output' ) {
      anchor[0] = 1;
      paintStyle.fillStyle = '#ffff00';
      isSource = true;
    } else {
      isTarget =true;
    }
    anchor[1] = y + y_offset;
    y = anchor[1];
    instance.addEndpoint(node, {
      uuid:node.getAttribute("id") + "-" + ports[i],
      paintStyle: paintStyle,
      anchor:anchor,
      maxConnections:-1,
      isSource:isSource,
      isTarget:isTarget
    });
  }
}

根据输入输出进行连线：

function connectPorts(instance,id, node1, port1, node2 , port2) {
  var color = "gray";
  var arrowCommon = { foldback:0.8, fillStyle:color, width:1 },
  overlays = [
    [ "Label", { label:"关联",cssClass:"csslabel"} ],
    [ "Arrow", { location:0.8 }, arrowCommon ],
    [ "Arrow", { location:0.2, direction:-1 }, arrowCommon ],
  ];
  var uuid_source = node1 + "-" + port1;
  var uuid_target = node2 + "-" + port2;
  instance.connect({uuids:[uuid_source, uuid_target]});
}

简单记录下，避免忘了，有相关问题欢迎留言或加入群648827021，相互交流