jsplumb--jquery流程图插件

singerye 发布于2019-08-29 13:23 / 1454人阅读

摘要：流程图插件说明插件皆可用于使用方法中使用插件效果图插件说明使用场景审批，流转等流程的制作页面，图中节点连线均由数据生成，图中节点可拖拽，可新增节点，点击保存后能够获得新的节点与连线的数据，便于保存到后台数据库。

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插件原理流程流程图数据流程图业务流程图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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