基于vue的jsplumb,支持拖拽生成节点,节点双击展示更多信息,节点连线,删除节点,删除连线,重绘连接图,当前页面刷新连接图,根据json画连接图等功能
本章主要讲 删除节点和连线 根据数据绘制连接图
删除节点
生成元素之后就给元素绑定双击事件,首先在jsPlumb中删除此节点的所有端点,然后在html中删掉此元素
jsPlumb.removeAllEndpoints(id);//删除节点的上下左右所有的
var parentDOM = $(this).parent().remove();
删除连线
需要绑定在jsplumb上
jsPlumb.bind("dblclick", function(conn, originalEvent) {
jsPlumb.detach(conn);//删除连线
}
根据数据绘制
数据就是上一章保存的数据
1.遍历里面的节点 然后append页面中
2.给每个节点加上下左右四个端点
3.遍历连线,然后用jsplumb的connect连线
jsPlumb.connect({ source: PageSourceId, target: PageTargetId }, con);
//PageSourceId开始节点的id PageTargetId结束节点的id coo就是上一章连接线的配置