jsplumb流程图应用实例

使用jsplumb背景

jsplumb功能非常强大，可以用来画流程图和组织图等其他的一些你想要的图。jsplumb有两个版本，一个商业版，一个社区版，商业版是需要收费的，社区版免费。在这里使用的是社区版2.15.6版本。jsplumb提供多种安装方式。在这里我们的使用范围是给公司内部人员通过后台去配置流程表单。前后端没有分离所以用的是引入js文件的方式。

表单效果图

可以从左边面板拖动字段到右边的模块中
点击右边的每个字段都可以编辑该字段的属性
可以拖动右边字段排序，限制只能在同一个模块中
表格字段里面可以再添加普通的字段但不能再次添加表格字段
下一步判断是流程表单还是普通表单，流程表单则进入流程图编辑页面继续操作，普通表单则提交到后台保存

流程效果图

初始进来只有一个初始状态节点
可以添加4种类型的节点，添加一个节点会自动连线
可以随意拖动节点，限制不能手动去连线，全部为自动连线
可以删除每个流程节点，该节点所有子节点全部会被删除
可以设置每个节点的属性
审批节点属性比较特殊，可以指定完成后和拒绝后指向某个状态流程节点，相应的线会连接上，通过的连线为绿色，拒绝的连线为红色
删除审批节点，则审批节点控制的连接节点不会删除，除非是该审批节点的子节点
记录每个节点的坐标位置
下一步提交到后台保存

代码实现

后端的前端页面都是使用vue混合开发的
由于代码比较多，这里就不贴详细代码了0.0

jsplumb引入关键代码
<script src="xxxx/js/jsplumb/jsplumb-2.15.6.js"></script>jsplumb初始化
jsPlumb.ready(function () {})

jsplumb流程图应用实例相关推荐

jsPlumb流程图完整实例
一. 效果演示二. 实现教程接触jsPlumb也有一个星期了,刚开始的时候,每处理一个步骤马上保存起来(比如添加节点添加线条删除节点等),当做到移动节点时无法获取到移动之后的回调函数,然而获取不到 ...
jsplumb设置锚点_记录一次基于jsPlumb流程图编辑器的开发过程
前言接到项目需求后,发现没有做过相关项目,盘算着拖拽倒是没有问题,但是控件的连线好像挺复杂,所以先开始了一番搜索,希望有合适的轮子那最好不过了.看了这篇对比文章:超级好用的流程图js框架,也看了一个 ...
java中审核订单流程图_「数据架构」数据流程图：实例-订餐系统
数据流图(DFD)提供了系统内信息流(即数据流)的可视化表示.通过绘制数据流程图,您可以了解由参与系统流程的人员提供并交付给他们的信息.完成流程所需的信息以及需要存储和访问的信息.本文以一个订餐系统为 ...
service数据保存_「数据架构」数据流程图与实例-客户服务系统
数据流图(DFD)提供了系统内信息流(即数据流)的可视化表示.通过创建一个数据流图,您可以告诉参与系统流程的人员所提供和交付的信息.完成流程所需的信息以及需要存储和访问的信息.数据流图在软件工程中得到 ...
C语言/C++【switch语句详解（用法、规则、流程图、实例）】
C++| 匠心之作从0到1入门学编程[视频+课件+笔记+源码] 目录 1.switch语句[C语言] 1.2.C语言中 switch语句的语法 1.3.switch语句遵循规则 1.3.switch ...
startuml如何画流程图_实例介绍用Visio画UML流程图方法
本文和大家重点讨论一下用Visio画UML流程图方面的内容,通过实例向大家介绍,相信通过本文的虚席你对用Visio画UML流程图有所了解. 用Visio画UML流程图在一次会议中看到有个同事在讲解 ...
Viso制作循环流程图(含实例步骤制作)
本博文源于Viso流程图绘制学习,旨在讲述如何用Viso构建出循环流程图.其中循环流程图分为当型循环和直到型循环. 传统流程图的符号选择循环结构的一般原则情况选择结果循环次数已知计数控制的循 ...
JavaScript ——jsplumb流程图随手笔记（一）
最近B/S程序中需要使用JS画流程图,找了一圈,试了几个,最终选择jsplumb来做,这里记下笔记 1.jsplumb官网地址:https://jsplumbtoolkit.com/,看下效果图: 2 ...
VUE jsplumb流程图设计

jsplumb流程图应用实例

使用jsplumb背景

表单效果图

流程效果图

代码实现

jsplumb流程图应用实例相关推荐

最新文章

热门文章