前言

jsPlumb是一款開源軟體，但jsPlumb toolkit是收費的。

本文主要使用jsPlumb實現一些簡單的流程設計功能。

基礎學習

首先引入jsplumb.min.js。

  1. <script src="https://cdn.jsdelivr.net/npm/jsplumb@2.8.0/dist/js/jsplumb.min.js"></script>

然後編寫程式碼如下：

  1. <html lang="en">
  2. ​
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <title>Document</title>
  8.   <style>
  9.     #diagramContainer {
  10.       padding: 20px;
  11.       width: 80%;
  12.       height: 200px;
  13.       border: 1px solid gray;
  14.     }
  15. ​
  16.     .item {
  17.       height: 80px;
  18.       width: 80px;
  19.       border: 1px solid blue;
  20.       float: left;
  21.     }
  22.   </style>
  23. </head>
  24. ​
  25. <body>
  26.   <div id="diagramContainer">
  27.     <div id="item_left" class="item"></div>
  28.     <div id="item_right" class="item" style="margin-left:50px;"></div>
  29.   </div>
  30.   <script src="https://cdn.jsdelivr.net/npm/jsplumb@2.8.0/dist/js/jsplumb.min.js"></script>
  31. ​
  32.   <script>
  33.     /* global jsPlumb */
  34.     jsPlumb.ready(function () {
  35.       jsPlumb.connect({
  36.         source: 'item_left',
  37.         target: 'item_right',
  38.         endpoint: 'Dot'
  39.       })
  40.     })
  41.   </script>
  42. </body>
  43. ​
  44. </html>

效果圖如下：

可以看到，我們定義了一個容器diagramContainer，和兩個div塊元素，然後通過jsPlumb的connect連線函式，將兩個正方形，連線到了一起。

基礎學習參考網站：https://github.com/wangduanduan/jsplumb-chinese-tutorial

流程設計器開發

首先設計Html元素，設計一個左側功能列表區域，一個右側流程設計區域。

然後再設計三個節點拖進設計區域後釋放時的樣式。

程式碼如下：

  1.  <div id="app">
  2.         <div class="container-fluid">
  3.             <div class="row">
  4.                 <div id="side-buttons" class="col-md-1 bg-info min-height ">
  5.                     <div style="text-align:center;">
  6.                         <h2 class="mt20 ">節點列表</h2>
  7.                         <hr />
  8.                         <a class="btn btn-success btn-controler btnw" href="#" data-template="tpl-Normal" role="button">
  9.                             <i class="fa fa-square" aria-hidden="true"></i>
  10.                             節點
  11.                         </a>
  12.                         <hr />
  13.                         <a id="export" class="btn btn-success mt10 btnw" href="#" role="button">
  14.                             <i class="fa fa-file-text-o" aria-hidden="true"></i>
  15.                             匯出
  16.                         </a>
  17.                     </div>
  18.                 </div>
  19.                 <div class="min-height">
  20.                     <div class="title"><p>提示：雙擊連線線可刪除連線。</p></div>
  21.                     <div id="drop-bg" class="col-md-11 bg-success min-height">
  22. ​
  23.                     </div>
  24.                 </div>
  25.             </div>
  26.         </div>
  27.     </div>
  28. ​
  29.     <script id="tpl-Normal" type="text/html">
  30.         <div class='pa' id='{{id}}' style='top:{{top}}px;left:{{left}}px; opacity: 0.6;'>
  31. ​
  32.             <a class='btn btn-default' href='#' role='button'>
  33.                 <div>
  34.                     <input type="text" value="{{comment}}" tag="{{id}}" class="nodeText" />
  35. ​
  36.                     <span class="delete-node pull-right" data-type="deleteNode" data-id="{{id}}" style="font-size:10px;margin:0 -10px 0 0">X</span>
  37.                     @*<span class="add-node pull-right" data-type="addDragNode" data-id="{{id}}" style="font-size:10px;margin:0 5px 0 0">+</span>*@
  38.                 </div>
  39.             </a>
  40.         </div>
  41.     </script>
  42. ​
  43.     <script id="tpl-Root" type="text/html">
  44.         <div class='pa' id='{{id}}' style='top:{{top}}px;left:{{left}}px;opacity: 0.6;'>
  45.             <a class='btn btn-success' href='#' role='button'>
  46.                 <div style="width:80px;height:30px;line-height:35px">
  47.                     {{comment}}
  48.                     @*<span class="delete-node pull-right" data-type="deleteNode" data-id="{{id}}">X</span>*@
  49.                 </div>
  50.             </a>
  51.         </div>
  52.     </script>
  53. ​
  54.     <script id="tpl-Exit" type="text/html">
  55.         <div class='pa' id='{{id}}' style='top:{{top}}px;left:{{left}}px'>
  56.             <a class='btn btn-danger' href='#' role='button'>
  57.                 <div style="width:80px;height:30px;line-height:35px">
  58.                     {{comment}}
  59.                     @*<span class="delete-node pull-right" data-type="deleteNode" data-id="{{id}}">X</span>*@
  60.                 </div>
  61.             </a>
  62.         </div>
  63.     </script>

頁面效果如下：

然後編寫程式碼實現拖拽和釋放的功能。

核心程式碼如下：

  1.   
  1. jsPlumb.ready(
  2.         function () {
  3.             console.log("main-start")
  4.             jsPlumb.setContainer('diagramContainer')
  5.  
  6.             $('.btn-controler').draggable({
  7.                 helper: 'clone',
  8.                 scope: 'ss'
  9.             })
  10. ​
  11.             $(areaId).droppable({
  12.                 scope: 'ss',
  13.                 drop: function (event, ui) {
  14.                     dropNode(ui.draggable[0].dataset.template, ui.position)
  15.                 }
  16.             })
  17. ​
  18.             $('#app').on('click', function (event) { 
  19.  
  20.                 event.stopPropagation()
  21.                 event.preventDefault()
  22.                 var item = event.target.dataset
  23.  
  24.                 if (item.type === 'deleteNode') {
  25.                     var index = -1;
  26.                     data.nodeList.forEach(function (node, i) {
  27.                         if (node.id == item.id) {
  28.                             index = i;
  29.                         }
  30.                     })
  31.                     data.nodeList.splice(index, 1);
  32.                     console.log(data.nodeList)
  33.                     jsPlumb.remove(item.id)
  34.                 }
  35.  
  36.             })
  37.  
  38.             // 單點選了連線線上的X號
  39.             jsPlumb.bind('dblclick', function (conn, originalEvent) {
  40.                 DataDraw.deleteLine(conn)
  41.             }) 
  42.  
  43.             // 當連結建立
  44.             jsPlumb.bind('beforeDrop', function (info) {
  45.                 console.log("beforeDrop")
  46.                 console.log(info)
  47.                 var isSame = false;
  48.                 data.nodeList.forEach(function (node) {
  49.                     if (info.sourceId == node.id) {
  50.                         if (!node.data) {
  51.                             node.data = []
  52.                             var nextNode = {
  53.                                 "nextNode": info.targetId
  54.                             }
  55.                             node.data.push(nextNode)
  56.                         }
  57.                         else {
  58.  
  59.                             node.data.forEach(function (dItem){
  60.                                 if (dItem.nextNode == info.targetId) {
  61.                                     isSame = true;
  62.                                     return;
  63.                                 }
  64.                             })
  65.                             if (!isSame) {
  66.                                 var nextNode = {
  67.                                     "nextNode": info.targetId
  68.                                 }
  69.                                 node.data.push(nextNode)
  70.                             }
  71.  
  72.                         }
  73.  
  74.                     }
  75. ​
  76.                 })
  77.                 if (!isSame) {
  78.                     console.log(data.nodeList)
  79.                     return connectionBeforeDropCheck(info)
  80.                 }
  81.                 else {
  82.                     console.log("節點相同")
  83.                     return
  84.                 }
  85.             })
  86.             console.log("main-DataDraw.draw")
  87.             DataDraw.draw(data.nodeList)
  88.             console.log("初始化節點文字事件")
  89.             initNodeTextEvent();
  90.  
  91.         })

jsPlumb函式：

setContainer：設定容器。

droppable：指定該區域支援拖拽的控制元件。

draggable：指定該按鈕可以被拖拽。

自定義函式：

DataDraw.draw初始化節點。

initNodeTextEvent設計圖中的節點中的節點名稱變化，同步到節點列表陣列物件中，實現資料同步。

頁面初始化時讀取了data.js檔案中的起始配置節點的資料。

data.js檔案如下：

  1. var data = {
  2.     'nodeList': [{ "id": "Start", "type": "Root", "comment": "開始", "top": 50, "left": 150, "data": [{ "nextNode": "81422cf0-00ae-11ec-b359-c13e24702355" }, { "nextNode": "779c8300-00b1-11ec-923c-fbdaa48876a6" }] }, { "id": "e1a3de30-0096-11ec-b888-ddd94967488d", "comment": "22", "top": 198, "left": 566, "type": "Normal", "data": [{ "nextNode": "Exit" }] }, { "id": "81422cf0-00ae-11ec-b359-c13e24702355", "comment": "1", "top": 634, "left": 432, "type": "Normal", "data": [{ "nextNode": "Exit" }] }, { "id": "84689a40-00ae-11ec-b359-c13e24702355", "comment": "2", "top": 628, "left": 198, "type": "Normal", "data": [{ "nextNode": "Exit" }] }, { "id": "779c8300-00b1-11ec-923c-fbdaa48876a6", "comment": "", "top": 891, "left": 617, "type": "Normal" }, { "id": "Exit", "type": "Exit", "comment": "結束", "top": 818, "left": 929 }, { "id": "a57fe0d0-00b3-11ec-99d4-39fb5d424f70", "comment": "", "top": 316, "left": 1130, "type": "Normal" }]
  3. }

這樣我們就實現了基礎的流程設計器了，下面我們看一下功能。

刪除

點選連結線可以刪除連結，如下圖：

拖拽

拖拽節點按鈕到設計器區域，如下圖：

匯出

點選匯出按鈕將當前流程的節點資訊匯出成json字串，如下圖

可以看到，設計器是支援一個節點發射出多個連結線的。

在匯出時，我們再設計器中修改的節點名，也被同步的匯出到json字串中了。

----------------------------------------------------------------------------------------------------

到此，jsPlumb開發流程設計器就已經介紹完了。

程式碼已經傳到Github上了，歡迎大家下載。

Github地址： https://github.com/kiba518/KibaWorkFlowDesigner_JS

----------------------------------------------------------------------------------------------------

注：此文章為原創，任何形式的轉載都請聯絡作者獲得授權並註明出處！
若您覺得這篇文章還不錯，請點選下方的【推薦】，非常感謝！

https://www.cnblogs.com/kiba/p/15293054.html