jsplumb--jquery流程圖插件

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();//獲取全部連線

更多api查看index.js文件

最後附上github地址歡迎start