本文介绍了如何利用jsplumb社区版2.15.6构建流程图和表单，包括前后端交互、节点拖放、编辑属性、自动连线等功能。流程图支持节点添加、删除、属性设置，并能根据审批节点的状态显示不同颜色的连线。
使用jsplumb背景
jsplumb功能非常强大，可以用来画流程图和组织图等其他的一些你想要的图。jsplumb有两个版本，一个商业版，一个社区版，商业版是需要收费的，社区版免费。在这里使用的是社区版2.15.6版本。jsplumb提供多种安装方式。在这里我们的使用范围是给公司内部人员通过后台去配置流程表单。前后端没有分离所以用的是引入js文件的方式。
表单效果图
- 可以从左边面板拖动字段到右边的模块中
- 点击右边的每个字段都可以编辑该字段的属性
- 可以拖动右边字段排序，限制只能在同一个模块中
- 表格字段里面可以再添加普通的字段但不能再次添加表格字段
- 下一步判断是流程表单还是普通表单，流程表单则进入流程图编辑页面继续操作，普通表单则提交到后台保存
流程效果图
- 初始进来只有一个初始状态节点
- 可以添加4种类型的节点，添加一个节点会自动连线
- 可以随意拖动节点，限制不能手动去连线，全部为自动连线
- 可以删除每个流程节点，该节点所有子节点全部会被删除
- 可以设置每个节点的属性
- 审批节点属性比较特殊，可以指定完成后和拒绝后指向某个状态流程节点，相应的线会连接上，通过的连
最低0.47元/天 解锁文章
扫一扫
948
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
