jsplumb--jquery流程圖插件

singerye 發布于2019-08-29 13:23 / 1485人閱讀

摘要：流程圖插件說明插件皆可用于使用方法中使用插件效果圖插件說明使用場景審批，流轉等流程的制作頁面，圖中節點連線均由數據生成，圖中節點可拖拽，可新增節點，點擊保存后能夠獲得新的節點與連線的數據，便于保存到后臺數據庫。

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

GPU云服務器云服務器 tomcat插件原理流程流程圖數據流程圖業務流程圖

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112570.html

jsplumb--jquery流程圖插件

摘要：流程圖插件說明插件皆可用于使用方法中使用插件效果圖插件說明使用場景審批，流轉等流程的制作頁面，圖中節點連線均由數據生成，圖中節點可拖拽，可新增節點，點擊保存后能夠獲得新的節點與連線的數據，便于保存到后臺數據庫。 jsPlumb流程圖插件說明 jquery插件皆可用于react,使用方法:react中使用jquery插件效果圖 showImg(https://segmentfault...

shuibo 2019-08-01 17:35 評論0 收藏0
jsplumb--jquery流程圖插件

摘要：流程圖插件說明插件皆可用于使用方法中使用插件效果圖插件說明使用場景審批，流轉等流程的制作頁面，圖中節點連線均由數據生成，圖中節點可拖拽，可新增節點，點擊保存后能夠獲得新的節點與連線的數據，便于保存到后臺數據庫。 jsPlumb流程圖插件說明 jquery插件皆可用于react,使用方法:react中使用jquery插件效果圖 showImg(https://segmentfault...

qc1iu 2019-08-21 16:24 評論0 收藏0
基于 flow.ci 實現 PHP 項目自動化持續集成

摘要：在，我們把項目的開發工作流稱為，每個由觸發器和插件構成。系統根據不同的語言和環境提供對應的模版，觸發器和插件。圖為跑完整個持續集成流程，健康的項目狀態。高效程序員的習慣之一——讓開發流程自動化。Automating shapes smarter future. 這是一個關于如何快速實現 PHP 項目自動化持續集成的快速指導。無論你是否使用過持續集成，或在苦心尋找一款合適的持續集成工具...

james 2019-06-27 14:02 評論0 收藏0