资料

jsplump网站

What

jsplumb是js工具包，是一种前端技术，为您提供了一种API，以便通过编程方式和通过鼠标/触摸事件来建立DOM元素之间的连接。

看官网案例和自己做的demo。更多demo

• 流程图，左边是3个组件，右边是拖拽操作区域，组件间通过连线连接起来。

  
  流程图

• 数据表关联关系图，左边是2个组件，右边是拖拽操作区域，组件间通过连线连接起来。

  
  表关联关系图

• 自己做的工作流demo，左边是自己定义的4个组件，中间拖拽操作区域，右边是组件属性区域，上面控制区域，下面是状态区域。

  
  工作流

• 工作流demo可以实现工作流的保存、读取（基于文件的存储json格式），执行功能是指根据工作流顺序执行每个组件，同等级组件会并发执行，并将每个组件执行情况显示在状态栏中，采用websocket通信。其中涉及数据结构中图的相关操作。

How

• jsplumb有收费版和社区版，收费版名称为：Toolkit Edition，社区版：Community Edition。Toolkit 版本，支持数据绑定，支持平移缩放小部件，如图1、2中的小部件，可以很好的和angular集成。

• 两个版本的区别

• 各个版本所能做的事情的demo如下：

  • Toolkit 和Community 版做的demo

• 通过demo你大概就能知道你需要哪个版本了，然后就去看开发文档.

• Toolkit 和Community 的开发文档

• 我做的demo使用社区版做的。

社区版学习

官方Community 的开发文档

jsPlumb.js(连线器)API阅读笔记
jsPlumb的简单使用