jsPlumb流程圖插件
說明
jquery插件皆可用於react,使用方法:react中使用jquery插件
效果圖
插件說明
使用場景:審批，流轉等流程的制作頁面，
圖中節點連線均由數據生成，圖中節點可拖拽，
可新增節點，點擊保存后能夠獲得新的節點與連線
的數據，便於保存到后台數據庫。
(因為要加載數據，所以最好用webstorm才能看到效果)### 相關API說明
//實例化對象
instance = jsPlumb.getInstance({
Endpoint : ["Dot", {radius:2}],
HoverPaintStyle: { strokeStyle: "#1e8151", lineWidth: 2 },
ConnectionOverlays : [
[ "Arrow", {location: 1, id:"arrow", length:10, foldback:0.8, width: 10} ],
[ "Label", { label:"", id:"label", cssClass:"labelstyle" }]
],
DragOptions : { zIndex:2000 },
Container:"topocontent"
});
//添加節點
根據數據循環生成div添加到容器內，每個div給與特定的id
//添加連線
//source,target分別對應着生成節點的id
var conor = instance.connect({ source: jump.SourceId, target:jump.TargetId});
conor.getOverlay("label").setLabel(jump.Text);
conor.setPaintStyle({fillStyle : 'none', strokeStyle: '#2F8E00'});
conor.bind('click',function(){
detachLine(this); //刪除連線
});
//保存數據
instance.getAllConnections();//獲取所有連線