Jsplumb调研

资料

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如下:

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

  • Toolkit 和Community 的开发文档

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

社区版学习

官方Community 的开发文档

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容