脚本宝典收集整理的这篇文章主要介绍了jsplumb--jquery流程图插件,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
jsPlumb流程图插件
说明
jquery插件皆可用于react,使用方法:react中使用jquery插件
效果图
插件说明
使用场景:审批,流转等流程的制作页面,
图中节点连线均由数据生成,图中节点可拖拽,
可新增节点,点击保存后能够获得新的节点与连线
的数据,便于保存到后台数据库。
(因为要加载数据,所以最好用webstorm才能看到效果)
//实例化对象
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
以上是脚本宝典为你收集整理的jsplumb--jquery流程图插件全部内容,希望文章能够帮你解决jsplumb--jquery流程图插件所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。