Jsplumb调研

资料

jsplump网站

What

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

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

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


    Jsplumb调研_第1张图片
    流程图
  • 数据表关联关系图,左边是2个组件,右边是拖拽操作区域,组件间通过连线连接起来。


    Jsplumb调研_第2张图片
    表关联关系图
  • 自己做的工作流demo,左边是自己定义的4个组件,中间拖拽操作区域,右边是组件属性区域,上面控制区域,下面是状态区域。


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

How

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

  • Jsplumb调研_第4张图片
    两个版本的区别
  • 各个版本所能做的事情的demo如下:

    • Toolkit 和Community 版做的demo
  • 通过demo你大概就能知道你需要哪个版本了,然后就去看开发文档.

  • Toolkit 和Community 的开发文档

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

社区版学习

官方Community 的开发文档

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

你可能感兴趣的:(Jsplumb调研)