摘要:流程图插件说明插件皆可用于使用方法中使用插件效果图插件说明使用场景审批,流转等流程的制作页面,图中节点连线均由数据生成,图中节点可拖拽,可新增节点,点击保存后能够获得新的节点与连线的数据,便于保存到后台数据库。
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
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/51238.html
摘要:流程图插件说明插件皆可用于使用方法中使用插件效果图插件说明使用场景审批,流转等流程的制作页面,图中节点连线均由数据生成,图中节点可拖拽,可新增节点,点击保存后能够获得新的节点与连线的数据,便于保存到后台数据库。 jsPlumb流程图插件 说明 jquery插件皆可用于react,使用方法:react中使用jquery插件 效果图 showImg(https://segmentfault...
摘要:流程图插件说明插件皆可用于使用方法中使用插件效果图插件说明使用场景审批,流转等流程的制作页面,图中节点连线均由数据生成,图中节点可拖拽,可新增节点,点击保存后能够获得新的节点与连线的数据,便于保存到后台数据库。 jsPlumb流程图插件 说明 jquery插件皆可用于react,使用方法:react中使用jquery插件 效果图 showImg(https://segmentfault...
摘要:在,我们把项目的开发工作流称为,每个由触发器和插件构成。系统根据不同的语言和环境提供对应的模版,触发器和插件。图为跑完整个持续集成流程,健康的项目状态。 高效程序员的习惯之一——让开发流程自动化。Automating shapes smarter future. 这是一个关于如何快速实现 PHP 项目自动化持续集成的快速指导。无论你是否使用过持续集成,或在苦心寻找一款合适的持续集成工具...
阅读 3500·2021-08-02 13:41
阅读 2257·2019-08-30 15:56
阅读 1492·2019-08-30 11:17
阅读 1148·2019-08-29 15:18
阅读 546·2019-08-29 11:10
阅读 2637·2019-08-26 13:52
阅读 481·2019-08-26 13:22
阅读 2902·2019-08-23 15:41