使用jsPlumb制作流程图设计器

最新推荐文章于 2024-06-16 09:33:57 发布
最新推荐文章于 2024-06-16 09:33:57 发布
阅读量7.4k 收藏 5
点赞数 1

jsPlumb是一个比较强大的绘图组件，它提供了一种方法，主要用于连接网页上的元素。在现代浏览器中，它使用SVG或者Canvas技术，而对于IE8以下(含IE8)的古董浏览器，则使用VML技术。

项目主页：http://jsplumbtoolkit.com/

GitHub：https://github.com/sporritt/jsPlumb

作为插件，主要支持jQuery/MooTools/YUI3三种js库，目前最新版本为1.4.1。其中作为jQuery的插件需要用到jQuery、jQuery UI，建议使用最新版本的库避免一些bug。

本文主要使用jQuery 1.9.0、jQuery UI 1.9.2、jsPlumb 1.4.1来绘制流程图。

资源准备

下载jsPlumb，用到以下几个文件：

  • build/js/jquery.jsPlumb-1.4.1-all.min.js
  • build/lib/jquery-1.9.0-min.js
  • build/lib/jquery-ui-1.9.2-min.js
  • build/lib/jquery.ui.touch-punch.min.js (可选) 用于触摸支持

以及build/demo/js/demo-helper-jquery.js，主要用于绘图模式的切换，调整为如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
jsPlumb.bind( "ready" , function () {
   // chrome fix.
   document.onselectstart = function () { return  false ; };
   // render mode
   var  resetRenderMode = function (desiredMode) {
     var  newMode = jsPlumb.setRenderMode(desiredMode);
     $( ".rmode" ).removeClass( "selected" );
     $( ".rmode[mode='"  + newMode + "']" ).addClass( "selected" );
     $( ".rmode[mode='canvas']" ).attr( "disabled" , !jsPlumb.isCanvasAvailable());
     $( ".rmode[mode='svg']" ).attr( "disabled" , !jsPlumb.isSVGAvailable());
     $( ".rmode[mode='vml']" ).attr( "disabled" , !jsPlumb.isVMLAvailable());
     nodeFlow.init();
   };
   $( ".rmode" ).bind( "click" , function () {
     var  desiredMode = $( this ).attr( "mode" );
     if  (jsPlumbDemo.reset) jsPlumbDemo.reset();
     jsPlumb.reset();
     resetRenderMode(desiredMode);
   });
   resetRenderMode(jsPlumb.SVG);
});

再准备css样式(从flowchartDemo.css调整而来)：

1
2
3
4
5
6
7
8
9
10
11
12
.node { border : 1px  solid  #346789 ; box-shadow: 2px  2px  19px  #aaa ; -o-box-shadow: 2px  2px  19px  #aaa ; -webkit-box-shadow: 2px  2px  19px  #aaa ; -moz-box-shadow: 2px  2px  19px  #aaa ; -moz-border-radius: 0.5em ; border-radius: 0.5em ; opacity: 0.8 ; filter: alpha(opacity= 80 ); width : 7em ; height : 5em ; line-height : 5em ; text-align : center ; z-index : 20 ; position : absolute ; background-color : #eeeeef ; color : black ; font-family : helvetica ; padding : 0.5em ; font-size : 1em ; }
   .node:hover { box-shadow: 2px  2px  19px  #444 ; -o-box-shadow: 2px  2px  19px  #444 ; -webkit-box-shadow: 2px  2px  19px  #444 ; -moz-box-shadow: 2px  2px  19px  #444 ; opacity: 0.8 ; filter: alpha(opacity= 80 ); }
 
._jsPlumb_connector { z-index : 4 ; }
._jsPlumb_endpoint { z-index : 21 ; cursor : pointer ; }
._jsPlumb_dragging { z-index : 4000 ; }
 
.dragHover { border : 1px  dotted  red ; }
 
.aLabel { background-color : white ; padding : 0.4em ; font : 12px  sans-serif ; color : #444 ; z-index : 21 ; border : 1px  dotted  gray ; opacity: 0.8 ; filter: alpha(opacity= 80 ); }
 
.ep { position : absolute ; right : 5px ; top : 5px ; width : 1em ; height : 1em ; background-color : #994466 ; cursor : pointer ; }

最终引入的资源如下：

1
2
3
4
5
6
7
< script  src='js/jquery-1.9.0.min.js'></ script >
  < script  src='js/jquery-ui-1.9.2.min.js'>
< link  href="css/demo.css" rel="stylesheet" />
< script  src="js/jquery.jsPlumb-1.4.1-all-min.js"></ script >
< script  src="js/jquery.ui.touch-punch.min.js"></ script >
< script  src="js/demo.init.js"></ script >
< script  src="js/demo-helper-jquery.js"></ script >

主要实现

参照例子中的Flowchart以及State Machine，实现如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
; ( function () {
   window.nodeFlow = {
     init: function () {
       // 设置点、线的默认样式
       jsPlumb.importDefaults({
         DragOptions: { cursor: 'pointer' , zIndex: 2000 },
         Endpoint: [ "Dot" , { radius: 1 }],
         HoverPaintStyle: { strokeStyle: "#42a62c" , lineWidth: 2 },
         ConnectionOverlays: [
           [ "Arrow" , { location: -7, id: "arrow" , length: 14, foldback: 0.8 }],
           [ "Label" , { location: 0.1, id: "label"  }]
         ]
       });
       // 连接事件
       jsPlumb.bind( "jsPlumbConnection" , function (conn, originalEvent) {
         if  (conn.connection.sourceId == conn.connection.targetId) {
           jsPlumb.detach(conn);
           alert( "不能连接自己！" );
         }
         $.each(jsPlumb.getEndpoints(conn.source), function (i, el) {
           if  (conn.connection != el.connections[0] &&
             (el.connections[0].targetId == conn.targetId || (el.connections[0].sourceId == conn.targetId && el.connections[0].targetId == conn.sourceId))) {
             jsPlumb.detach(conn);
             alert( "不能重复连接！" );
             return  false ;
           }
         });
 
         nodeFlow.onConnectionChange && nodeFlow.onConnectionChange(conn);
         conn.connection.bind( "editCompleted" , function (o) {
           if  ( typeof  console != "undefined" )
             console.log( "connection edited. path is now " , o.path);
         });
       });
       // 取消连接事件
       jsPlumb.bind( "jsPlumbConnectionDetached" , function (conn) {
         nodeFlow.onConnectionChange && nodeFlow.onConnectionChange(conn);
       });
       // 双击取消连接
       jsPlumb.bind( "dblclick" , function (conn, originalEvent) {
         jsPlumb.detach(conn);
       });
       // 连接的元素
       // 本例中.node既是源头又是目标
       var  nodeList = $( ".node" );
       nodeList.each( function (i, e) {
         // 设置连接的源元素
         jsPlumb.makeSource($(e), {
           filter: ".ep" , // .ep元素用于拖动连接
           anchor: "Continuous" ,
           connector: [ "Flowchart" , { curviness: 20 }], // 连接的方式为流程图
           connectorStyle: { strokeStyle: "#014ae1" , lineWidth: 2 },
           maxConnections: -1 // 最大连接数不限
         });
       });
       // 设置连接目标
       jsPlumb.makeTarget(nodeList, {
         dropOptions: { hoverClass: "dragHover"  },
         anchor: "Continuous"
       });
       // 初始化所有连接元素为可拖动
       jsPlumb.draggable(nodeList);
     }
   };
})();

 

保存及载入状态

创建如下html结构作为测试：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
< asp:HiddenField  runat="server" ID="connections" /> <!--保存连接-->
< asp:HiddenField  runat="server" ID="locations" /> <!--保存元素位置-->
< div  class="nodeWrapper" style="height:100%;">
   < div  class="node" id='node1' data-id="1">
     < div  class="ep"></ div >
     < strong >节点1</ strong >
   </ div >
   < div  class="node" id='node1' data-id="1">
     < div  class="ep"></ div >
     < strong >节点1</ strong >
   </ div >
   < div  class="node" id='node2' data-id="2">
     < div  class="ep"></ div >
     < strong >节点2</ strong >
   </ div >
   < div  class="node" id='node3' data-id="3">
     < div  class="ep"></ div >
     < strong >节点3</ strong >
   </ div >
</ div >

在连接状态改变、表单提交时保存连接数据：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 连接改变时把所有的节点位置、连接以JSON格式存入到隐藏域中
nodeFlow.onConnectionChange = function () {
   var  connections = [], locations = [], conns = jsPlumb.getAllConnections();
   $.each(conns, function (scopeName, scopeConnections) {
     $.each(scopeConnections, function (i, el) {
       locations.push($.extend(el.source.offset(), { nodeId: el.source.data( "id" ) }));
       locations.push($.extend(el.target.offset(), { nodeId: el.target.data( "id" ) }));
       connections.push({ source: el.source.data( "id" ), target: el.target.data( "id" ) });
     });
   });
   $( "input[id$=connections]" ).val(JSON.stringify(connections));
   $( "input[id$=locations]" ).val(JSON.stringify(locations));
};
// 提交表单时更新连接数据
$( ":submit" ).click(nodeFlow.onConnectionChange);

通过以上代码，即可以在表单提交时把流程图的状态保存到数据库。

载入数据

调整html代码如下：

1
2
3
4
5
6
7
8
9
10
< div  class="nodeWrapper" style="height:100%;">
   < asp:Repeater  runat="server" ID="nodeList">
     < ItemTemplate >
       < div  class="node" id='node<%#Eval("nodeId") %>' data-id="<%#Eval("nodeId") %>" style="<%#GetLocation((int)Eval("nodeId"))%>">
         < div  class="ep"></ div >
         < strong ><%#Eval("nodeName") %></ strong >
       </ div >
     </ ItemTemplate >
   </ asp:Repeater >
</ div >

从数据库获取节点、位置、连接数据：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
/// <summary>
/// 节点信息
/// </summary>
public  class  NodeItem
{
     public  int  NodeId { get ; set ; }
     public  string  NodeName { get ; set ; }
}
/// <summary>
/// 节点位置信息
/// </summary>
public  class  NodeLocation
{
     public  int  NodeId { get ; set ; }
     public  double  Left { get ; set ; }
     public  double  Top { get ; set ; }
}
/// <summary>
/// 节点连接信息
/// </summary>
public  class  NodeConnection
{
     public  int  Source { get ; set ; }
     public  int  Target { get ; set ; }
}
 
List<NodeLocation> locationData;
 
protected  void  Page_Load( object  sender, EventArgs e)
{
     if  (!IsPostBack)
     {
         var  nodeData = new  List<NodeItem>
         {
             new  NodeItem{NodeId=1, NodeName= "节点1" },
             new  NodeItem{NodeId=2, NodeName= "节点2" },
             new  NodeItem{NodeId=3, NodeName= "节点3" }
         };
         nodeList.DataSource = nodeData;
         nodeList.DataBind();
         
         // 从数据库获取位置以及连接
         locationData = JsonConvert.DeserializeObject<List<NodeLocation>>(locationString);
         var  connectionData = JsonConvert.DeserializeObject<List<NodeConnection>>(connectionString);
 
         // 连接所有节点
         var  builder = new  StringBuilder();
         builder.Append( "jsPlumb.bind(\"ready\", function() {" );
         connectionData.ForEach(c =>
         {
             builder.AppendFormat( "jsPlumb.connect({{source: 'node{0}', target: 'node{1}'}});" , c.Source.ToString(), c.Target.ToString());
         });
         builder.Append( "});" );
     }
}
 
/// <summary>
/// 获取位置
/// </summary>
protected  string  GetLocation( int  nodeId)
{
     var  ll = locationData.FirstOrDefault(l => l.NodeId == nodeId);
     if  (ll != null )
         return  "left:"  + ll.Left.ToString() + "px;top:"  + ll.Top.ToString() + "px;" ;
     return  string .Empty;
}

其中，每次载入时，都需要获取所有连接的数据，并通过脚本把所有节点连接起来。

 

结尾

以上功能只用到jsPlumb少量API，实现起来都比较简单。更多的功能参考官方文档及API文档进行扩展。

在使用jsPlumb之前也看过一些其他的js组件：

「已注销」
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jsplumb-:基于jsplumb制作的拖拽流程图，自动生成json数据，框架是基于H+的外壳
04-29
jsplumb- 基于jsplumb制作的拖拽流程图，自动生成json数据，也可以根据后台的json数据自动的渲染页面，外框架是基于H+的一个外壳，有喜欢的可以看一下
最完整的jsPlumb流程图demo
10-15
总的来说，“最完整的jsPlumb流程图demo”提供了一个全面的学习资源，帮助开发者理解和掌握jsPlumb库的使用，从而在自己的项目中实现动态、交互式的流程图。无论是初学者还是有经验的开发者，都能从中受益，提升Web...
Jsplumb从入门到实战
02-19
jsplumb是一款非常强大的插件，通过Jsplumb够让你用动态(拖拽)或静态(根据数据渲染)的链接来连接html界面上的元素,Jsplumb可以基于浏览器实现类似Visio等应用程序、工作流设计器、思维导图 等 必须绘制图表的Web应用程序。在实际的开发中由于Jsplumb连接的所有参数都是非常精细可控的，因此通过Jsplumb您可以绘制您可以想到的任何类型的连线图表！
探索流程绘制的无限可能：jsplumb-example项目深度解析与应用推荐
最新发布
gitblog_00088的博客
06-16 355
探索流程绘制的无限可能：jsplumb-example项目深度解析与应用推荐 项目地址:https://gitcode.com/wangyu142857/jsplumb-example 在数字化时代，流程图成为了表达逻辑、设计系统和提升理解效率的强大工具。今天，我们将深入探讨一个简洁高效的开源宝藏——jsplumb-example，它是简化流程图绘制的新星，专为那些寻求直观、灵活解决方案的开发者而...
【Jsplumb】Jsplumb基础教程(vue+jsplumb+d3)
热门推荐
weixin_39085822的博客
06-20 5万+
目前github社区存在几款可用于设计流程图的绘图框架: go.js( http://www.gojs.net/latest/index.html) :go.js 提供一整套的JS工具 ，支持各种交互式图表的创建；目前go.js 是闭源收费的 jsPlumb（https://jsplumbtoolkit.com/): jsPlumb是一套开源的流程图创建工具 ，小巧精悍，使用简单；jsPlumb 有社区版跟收费版，我们可使用的是社区版 JointJS(https://www.jointjs.com/)
jsPlumb的学习使用(三):常规流程图完成
m0_54741495的博客
06-06 2768
这篇文章就给大家展示个人的一个jsplumb成品,也是放在自己的项目之中.注释我基本上也都写好了,但是目前代码还没有进行整理,还有很多的测试痕迹以及备注打印.
jsplum入门
meixu568的专栏
08-27 5634
一、基本知识 Source：源节点 Target：目标节点 Anchor：锚点 Endpoint：端点，连接的起点或终点 Connector：连线，连接两个节点的直观表现 Overlay：装饰连接器的组件，类似箭头之类 Group：包含在某个其他元素中的一组元素，可以折叠，导致与所有组成员的连接被合并到折叠的组容器上。 jsPlumb通过元素id来和所有的元素进行交互，如果没有为...
jsPlumb在线流程设计器_demo版.rar
02-26
主要在学习jsplumb过程中利用jqueryUI、bootstrap等资源改版的web版在线流程设计器。 有启发 可参考 详情效果图参考地址：https://blog.csdn.net/hexin8888/article/details/83992816
jsPlumb在线流程设计器demo参考源码
11-01
主要在学习jsplumb过程中利用jqueryUI、bootstrap等资源改版的web版在线流程设计器。详情效果图参考地址：https://blog.csdn.net/hexin8888/article/details/83992816
vue jsPlumb流程图
01-03
基于vue框架开发的jsPlumb流程图项目，可拖拽生成节点，修改节点内容和图标。 插件版本： "element-ui": "^2.11.1", "jsplumb": "^2.11.2", "vue": "^2.5.2
jsPlumb+jquery 流程图设计实例
02-06
jsPlumb是一个JavaScript库，专用于创建视觉连接器或流程图，而jQuery是一个广泛使用的JavaScript库，简化了DOM操作和事件处理。当两者结合时，可以快速实现动态和交互式的流程图设计。本文将深入探讨如何使用...
jsPlumb的学习使用(一):引入项目和基础示例
m0_54741495的博客
05-29 1751
jsplumb是一个可以用来实现可视化功能的前端应用库,如果在开发过程中遇到需要实现一些流程图、拓扑图或者是导力图等可视化的功能,就可以使用jsplumb这个库来实现.在文章中,我就不将api具体的每一个参数都罗列出来了,具体每一个配置的参数集文档中都有.我主要是解释一下这些api的作用。
jsplumb 中文基础教程 流程图配置文档
积极的小可爱~的博客
06-15 5924
你有没有想过在你的网站上展示图表或者甚至在浏览器应用程序中使用它？用jsPlumb你可以！它是完全免费的，并根据MIT许可证提供。您可以直接从jsPlumb github网站下载框架。该项目主要由Simon Porritt开发，他在澳大利亚西德尼担任网络开发人员。jsPlumb由他积极开发。作为许多优秀的开发人员，他似乎更喜欢开发代码而不是编写教程，这就是为什么我提供一个简单的入门教程。
jsplumb
weixin_34033624的博客
08-29 1593
一、简介：jsplumb是jquery的一个插件，它能够让你用动态或静态的链接来连接html界面上的元素，并且从1.10版本开始，提供用鼠标拖动来连接。jsPlumb允许您使用SVG，Canvas或者VML链接屏幕上的元素，这些取决于您使用的浏览器的能力。主要包含以下模块：Anchor、Connector、Endpoint、Overlay、Style、css样式、Events二、Anchor：S...
前端流程图插件jsPlumb教程附一个简单demo
鹏多多的博客
10-20 1万+
最近公司要做一个流程功能图，准备参考轻流BPM的流程样式，可惜本人目前技术有限，所以退而求其次，先做成visio这样的拖拽式流程设计。第一次接触jsplumb，文档都是在网上搜的，所以自己就整理一下，结合自己的一些应用，做了一个demo，留待以后有需要
jsplumb中文文档
qq_21280835的博客
03-04 2627
1. jsplumb 中文基础教程 1.1. 什么是jsplumb？ 1.2. jsplumb能干什么？
jsPlumb流程图完整实例
踮脚敲代码
06-24 7569
一. 效果演示 二. 实现教程 接触jsPlumb也有一个星期了，刚开始的时候，每处理一个步骤马上保存起来（比如添加节点添加线条删除节点等），当做到移动节点时无法获取到移动之后的回调函数，然而获取不到移动之后的位置。经过查找前辈的资料，终于恍然大悟，我们可以把整个流程图画好之后再提供一个提交按钮，点击之后再保存起来，这样就避免复杂的节点线条的操作事件了。因此，我们只要获取到所有节点线条数据即可。 三. 获取所有节点 想要获取所有节点直接循环设计区域内的jnode-box元素即可，先声明一个变量保存节点信息
BPMN.JS流程设计器
m0_59792807的博客
10-12 1727
最近工作需要，根据xml转成svg图片，用到了bpmn.js这个组件，故此记录一下。
jsPlumb开发教程（实现html5拖拽连线）
weixin_55629817的博客
11-13 1421
jsPlumb开发教程（实现html5拖拽连线）,连线、拖拽
angular中使用jsplumb画流程图
08-11
在Angular中使用jsPlumb来画流程图，可以通过以下步骤进行操作： 第一步，引入jsPlumb库。你可以通过npm命令安装jsPlumb库，然后将其引入到你的Angular项目中。例如，使用以下命令安装jsPlumb库： ``` npm install...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值