資訊專欄INFORMATION COLUMN
摘要：流程圖插件說明插件皆可用于使用方法中使用插件效果圖插件說明使用場(chǎng)景審批，流轉(zhuǎn)等流程的制作頁(yè)面，圖中節(jié)點(diǎn)連線均由數(shù)據(jù)生成，圖中節(jié)點(diǎn)可拖拽，可新增節(jié)點(diǎn)，點(diǎn)擊保存后能夠獲得新的節(jié)點(diǎn)與連線的數(shù)據(jù)，便于保存到后臺(tái)數(shù)據(jù)庫(kù)。
jsPlumb流程圖插件 說明
jquery插件皆可用于react,使用方法:react中使用jquery插件
效果圖 插件說明使用場(chǎng)景:審批，流轉(zhuǎn)等流程的制作頁(yè)面， 圖中節(jié)點(diǎn)連線均由數(shù)據(jù)生成，圖中節(jié)點(diǎn)可拖拽， 可新增節(jié)點(diǎn)，點(diǎn)擊保存后能夠獲得新的節(jié)點(diǎn)與連線 的數(shù)據(jù)，便于保存到后臺(tái)數(shù)據(jù)庫(kù)。 (因?yàn)橐虞d數(shù)據(jù)，所以最好用webstorm才能看到效果)
### 相關(guān)API說明
//實(shí)例化對(duì)象
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"
});
//添加節(jié)點(diǎn)
根據(jù)數(shù)據(jù)循環(huán)生成div添加到容器內(nèi)，每個(gè)div給與特定的id
//添加連線
//source,target分別對(duì)應(yīng)著生成節(jié)點(diǎn)的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); //刪除連線
});
//保存數(shù)據(jù)
instance.getAllConnections();//獲取所有連線
更多api查看index.js文件
最后附上github地址歡迎start
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/51238.html
摘要：流程圖插件說明插件皆可用于使用方法中使用插件效果圖插件說明使用場(chǎng)景審批，流轉(zhuǎn)等流程的制作頁(yè)面，圖中節(jié)點(diǎn)連線均由數(shù)據(jù)生成，圖中節(jié)點(diǎn)可拖拽，可新增節(jié)點(diǎn)，點(diǎn)擊保存后能夠獲得新的節(jié)點(diǎn)與連線的數(shù)據(jù)，便于保存到后臺(tái)數(shù)據(jù)庫(kù)。 jsPlumb流程圖插件 說明 jquery插件皆可用于react,使用方法:react中使用jquery插件 效果圖 showImg(https://segmentfault...
摘要：流程圖插件說明插件皆可用于使用方法中使用插件效果圖插件說明使用場(chǎng)景審批，流轉(zhuǎn)等流程的制作頁(yè)面，圖中節(jié)點(diǎn)連線均由數(shù)據(jù)生成，圖中節(jié)點(diǎn)可拖拽，可新增節(jié)點(diǎn)，點(diǎn)擊保存后能夠獲得新的節(jié)點(diǎn)與連線的數(shù)據(jù)，便于保存到后臺(tái)數(shù)據(jù)庫(kù)。 jsPlumb流程圖插件 說明 jquery插件皆可用于react,使用方法:react中使用jquery插件 效果圖 showImg(https://segmentfault...
摘要：在，我們把項(xiàng)目的開發(fā)工作流稱為，每個(gè)由觸發(fā)器和插件構(gòu)成。系統(tǒng)根據(jù)不同的語(yǔ)言和環(huán)境提供對(duì)應(yīng)的模版，觸發(fā)器和插件。圖為跑完整個(gè)持續(xù)集成流程，健康的項(xiàng)目狀態(tài)。 高效程序員的習(xí)慣之一——讓開發(fā)流程自動(dòng)化。Automating shapes smarter future. 這是一個(gè)關(guān)于如何快速實(shí)現(xiàn) PHP 項(xiàng)目自動(dòng)化持續(xù)集成的快速指導(dǎo)。無論你是否使用過持續(xù)集成，或在苦心尋找一款合適的持續(xù)集成工具...
閱讀 3579·2021-08-02 13:41
閱讀 2450·2019-08-30 15:56
閱讀 1527·2019-08-30 11:17
閱讀 1186·2019-08-29 15:18
閱讀 591·2019-08-29 11:10
閱讀 2681·2019-08-26 13:52
閱讀 520·2019-08-26 13:22
閱讀 2962·2019-08-23 15:41
