蓝冠官网-蓝冠公司|蓝冠招商注册-蓝冠开户
蓝冠官网(主管Q374919)

蓝冠官网jquery社区_基于jsPlumb实现的可拖拽自定义流程图


 查看演示
 website
 立即下载 插件描述:基于jsPlumb.js实现的可拖拽流程图,可以导出json,可以根据json自己遍历数据,来加载流程图。

更新时间:2020-10-28 00:26:05

使用方法

一,需要引用的文件:

<link rel="stylesheet" type="text/css" href="./css/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="./css/style.css">
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="https://www.jq22.com/jquery/jquery-ui-1.11.0.js"></script>
<script type="text/javascript" src="./js/jquery.jsPlumb.min.js"></script>
<script type="text/javascript" src="./js/index.js"></script>

二、官方jsPlumb.js方法参考:

https://github.com/wangduanduan/jsplumb-chinese-tutorial

jsplumb 中文基础教程

 jsplumb能干什么?

那么如果你应该使用它取决于你想用jsPlumb做什么。该框架适用于必须绘制图表的Web应用程序,例如类似于Visio的应用程序或工作流程设计器等。由于图表项目和连接的所有参数都是非常精细可控的,因此您可以绘制您可以想到的任何类型的图表的!

基本概念

Anchors [todo]

锚点类型:

Connectors [todo]

连线类型:

Endpoints [todo]

端点类型:

Overlays [todo]

Overlays可以理解为在连接线上的文字或者箭头之类的东东

Overlays类型

// 连线上overlay可以多个,
// 每个overlay可以指定相对位置
// label类型的overlay实际上可以在里面直接写html
// 
jsPlumb.connect({
  ...
  connectorOverlays: [
    ['Arrow', {
      width: 10,
      length: 10,
      location: 1
    }],
    ['Label', {
      label: '<button class="delete-node-btn">X</button>',
      cssClass: '',
      labelStyle: {
        color: 'red'
      },
      events: {
        click: function (labelOverlay, originalEvent) {
          console.log('click on label overlay for :' + labelOverlay.component)
          console.log(labelOverlay)
          console.log(originalEvent)
        }
      }
    }]
  ]
});

基础demos

连接两个节点

jsPlumb.ready方法和jquery的ready方法差不多的功能,jsPlumb.connect用于建立连线

<div id="diagramContainer">
    <div id="item_left" class="item"></div>
    <div id="item_right" class="item" style="margin-left:50px;"></div>
  </div>
  <script src="https://cdn.bootcss.com/jsPlumb/2.6.8/js/jsplumb.min.js"></script>
  <script>
    /* global jsPlumb */
    jsPlumb.ready(function () {
      jsPlumb.connect({
        source: 'item_left',
        target: 'item_right',
        endpoint: 'Dot'
      })
    })
  </script>

参数说明: jsPlumb.connect(config) return connection

参数 参数类型 是否必须 说明
source String,Object,Endpoint 连线源的标识,可以是id, element, 或者Endpoint
target String,Object,Endpoint 连线目标的标识,可以是id, element, 或者Endpoint
endpoint String 可选 端点类型,形状

2021-04-01