0.问题
在利用jsPlumb.deleteEveryConnection
删除所有连线报错
jsPlumb.deleteEveryConnection is not a function!
1.解决
jsPlumb.js 版本是Community Edition社区版 1.7.6。
我的jsPlumb是cdn引入的,直接去网页上查看js源文件。
发现deleteEveryConnection方法的确搜索不到,然后翻了下,在文件中找到了detachEveryConnection()
!
使用
jsPlumb.detachEveryConnection();
代替deleteEveryConnection
后报错消失问题解除,反之亦然
2.jsPlumb删除画布上所有节点和连线
画布上一共有 节点、连线和端点。其中连线和端点是jsplumb维护的,节点需要我们自己维护。
jsPlumb文档中只有
- 删除所有节点的端点 detachEveryConnection
- 删除所有连线 deleteEveryEndpoint
这两个方法,对于节点删除我只找到了remove(id)方法
所以JsPlumb清空画布思路如下:
自行想办法清除节点(我使用remove方法),然后jsplumb生成的端点和连线就由jsplumb上述两个api搞定清理。
tableID=new Array();
function clear(){
clearAllNode();
jsPlumb.detachEveryConnection();
jsPlumb.deleteEveryEndpoint ()
}
function clearAllNode(){
if(tableID.length!==0){
tableID.forEach(id=>{
jsPlumb.remove(id)
})
}
}
tableID是存放节点id的数组,需要自行预先存入节点的id。
删除时遍历tableID,根据节点id remove掉所有节点,再清除连线和端点即可。