JointJS动态流程图升级

之前写了一片JointJS的简单使用，最近解答评论的同时又重新查看了下发现有些不足，大半年不接触进行温习都要思考一下才想起来，感觉可能对初入学习理解起来帮助不大，现在更新升级版本，帮助大家同时以便以后使用起来更好的回忆。废话不多说进入正题

这次会分成三个部分进行讲解

一简单使用

先上效果图

这种模式的流程图较为简单

准备还是

1.jquery

2.Lodash.js

3.Backbone.js

4.joint.js

5.joint.css

这五个

然后定义模板元素和覆盖的元素

<div id="paper"></div>
<div class="box"></div>

css：

<style type="text/css">.left {float: left;height: 100%;width: 20%;}html,body,#paper {height: 100%;width: 100%;}#paper {position: absolute;top: 0;}p {margin: 50px 0;}</style>

js：

<script type="text/javascript">var graph = new joint.dia.Graph;var paper = new joint.dia.Paper({el: $('#paper'),width: 100 + '%',height: 100 + '%',gridSize: 1,model: graph});function shape(x, y, label, a, b) {var cell = new joint.shapes.basic.Rect({position: {x: x,y: y},size: {width: 100,height: 50},attrs: {rect: {fill: '#000',rx: 5,ry: 5,'stroke-width': 0},text: {text: label,'ref-x': .5,'ref-y': .5,fill: '#fff'},}});graph.addCell(cell);$(a).click(function() {window.open(b);});cell.toBack();return cell;};function link(source, target, label, vertices) {var cell = new joint.shapes.fsa.Arrow({source: {id: source.id},target: {id: target.id},labels: [{position: 0.5,attrs: {text: {text: label || '','font-weight': 'bold'}}}],vertices: vertices || [],attrs: ({'.connection': {stroke: '#333333', //连线颜色'stroke-width': 4 //连线粗细},'.marker-target': {fill: 'red',d: 'M 10 0 L 0 5 L 10 10 z'}})});graph.addCell(cell);cell.toBack()return cell;}var data = [[{title: '订单',tolink: "",state: "0",id: "1",name: '订单'}],[{title: '预售',tolink: "1",state: "1",id: "2",name: '预售'}, {title: '预售2',tolink: "1",state: "0",id: "3",name: '预售2'}],[{title: '采购清单',tolink: "2",state: "1",id: "4",name: '采购清单'}]]console.log(data)var arraylist = [];$.each(data, function(index, item1) {$(".box").append("<div class='left'></div>")$.each(item1, function(index2, item2) {$(".left").eq(index).append("<p id='" + item1[index2].id + "'>" + item1[index2].title + "</p>")debuggervar id1 = item1[index2].idvar arrValue1 = arraylist[id1];var y = $("#" + id1).offset().top;var x = $("#" + id1).offset().left;var name = item1[index2].nameif(arrValue1 == undefined) {arraylist[id1] = shape(x, y, name);}if(item1[index2].tolink != "") {var id2 = item1[index2].tolinkvar arrValue2 = arraylist[id2];var y2 = $("#" + id2).offset().top;var x2 = $("#" + id2).offset().left;var state = item1[index2].stateif(arrValue2 == undefined) {arraylist[id2] = shape(x2, y2);}link(arraylist[id2], arraylist[id1], state);}});});</script>

shape方法五个参数分别是，x坐标，y坐标，显示文本，点击事件（元素），链接跳转地址，后两个目前没用没做处理

link方法4个参数分别是，连线开始id，连线结束id，线上文本，两点连接线轨迹，

二随意连线流程图

效果图如下

这个相比图一就比较随意

前面基本一致

js：

<script type="text/javascript">var graph = new joint.dia.Graph;var paper = new joint.dia.Paper({el: $('#paper'),width: 100 + '%',height: 100 + '%',gridSize: 1,model: graph});function poit(x, y, label, a, b) {var cell = new joint.shapes.basic.Rect({position: {x: x,y: y},size: {width: 100,height: 50},attrs: {rect: {fill: '#000',rx: 5,ry: 5,'stroke-width': 0},text: {text: label,'ref-x': .5,'ref-y': .5,fill: '#fff'},}});graph.addCell(cell);$(a).click(function() {window.open(b);});cell.toBack();return cell;};function link(source, target, label, vertices) {var cell = new joint.shapes.fsa.Arrow({source: {id: source.id},target: {id: target.id},labels: [{position: 0.5,attrs: {text: {text: label || '','font-weight': 'bold'}}}],vertices: vertices || [],attrs: ({'.connection': {stroke: '#333333', //连线颜色'stroke-width': 4 //连线粗细},'.marker-target': {fill: 'red',d: 'M 10 0 L 0 5 L 10 10 z'}})});graph.addCell(cell);cell.toBack()return cell;}var data = [[{title: '订单',tolink: "",state: "0",id: "1",name: '订单',pox:500,poy:400}],[{title: '预售',tolink: "1",state: "1",id: "2",name: '预售',pox:100,poy:300}, {title: '预售2',tolink: "1",state: "0",id: "3",name: '预售2',pox:400,poy:600}],[{title: '采购清单',tolink: "2",state: "1",id: "4",name: '采购清单',pox:300,poy:800}]]console.log(data)var arraylist = [];$.each(data, function(index, item1) {$(".box").append("<div class='left'></div>")$.each(item1, function(index2, item2) {$(".left").eq(index).append("<p id='" + item1[index2].id + "'>" + item1[index2].title + "</p>")debuggervar id1 = item1[index2].idvar arrValue1 = arraylist[id1];var y = item1[index2].poy;var x = item1[index2].pox;var name = item1[index2].nameif(arrValue1 == undefined) {arraylist[id1] = poit(x, y, name);}if(item1[index2].tolink != "") {var id2 = item1[index2].tolinkvar arrValue2 = arraylist[id2];var y2 = $("#" + id2).offset().top;var x2 = $("#" + id2).offset().left;var state = item1[index2].stateif(arrValue2 == undefined) {arraylist[id2] = poit(x2, y2);}link(arraylist[id2], arraylist[id1], state);}});});</script>

与一的不同就是data多了两个指端x，y坐标，这类的使用在静态流程图中使用不错，弊端是前提就要知道每个模块与模块的位置

三动态流程图多级分类

效果图如下

这个相比前两个就复杂了一些

开始准备还是不变

js：

<script type="text/javascript">var json = {"Item": [{"Department": "技术中心","DepartSort": 2,"NavigatItem": [{"Id": "66f48322cf334263a8b392ff14919781","Name": "打样","Url": "/q/mpic/20170731omsproofingnewhead","Department": "技术中心","Display": "款式打样","Childs": []}]}, {"Department": "业务部","DepartSort": 3,"NavigatItem": [{"Id": "3200d59319e045ab934097a447066b74","Name": "款式","Url": "/q/mpic/20171019omsdesignnewhead","Department": "业务部","Display": "款式库，存储各种款式","Childs": [{"Id": "1af1a2c431d946718ad1178df6b242c3","Name": "报价","Url": "","Department": "业务部","Display": "","Childs": [{"Id": "477d085b884643d390c727fbfcc44a49","Name": "订单","Url": "","Department": "业务部","Display": "","Childs": [{"Id": "594ba51357854f739171eb6bc36b00ea","Name": "加工","Url": "","Department": "业务部","Display": "","Childs": []}, {"Id": "8081fa7b8ff24a5cb5a3c2d8ee3eb877","Name": "储运","Url": "","Department": "储运部","Display": "","Childs": []}, {"Id": "8f9ba2fe379b404ab8a5020f9775fc86","Name": "预估","Url": "","Department": "业务部","Display": "","Childs": [{"Id": "869117e2f5604a7d892e04b6a283dc92","Name": "采购","Url": "","Department": "开发采购部","Display": "","Childs": []}]}]}]}, {"Id": "66f48322cf334263a8b392ff14919781","Name": "打样","Url": "/q/mpic/20170731omsproofingnewhead","Department": "技术中心","Display": "款式打样","Childs": []}]}, {"Id": "1af1a2c431d946718ad1178df6b242c3","Name": "报价","Url": "","Department": "业务部","Display": "","Childs": [{"Id": "477d085b884643d390c727fbfcc44a49","Name": "订单","Url": "","Department": "业务部","Display": "","Childs": [{"Id": "594ba51357854f739171eb6bc36b00ea","Name": "加工","Url": "","Department": "业务部","Display": "","Childs": []}, {"Id": "8081fa7b8ff24a5cb5a3c2d8ee3eb877","Name": "储运","Url": "","Department": "储运部","Display": "","Childs": []}, {"Id": "8f9ba2fe379b404ab8a5020f9775fc86","Name": "预估","Url": "","Department": "业务部","Display": "","Childs": [{"Id": "869117e2f5604a7d892e04b6a283dc92","Name": "采购","Url": "","Department": "开发采购部","Display": "","Childs": []}]}]}]}, {"Id": "477d085b884643d390c727fbfcc44a49","Name": "订单","Url": "","Department": "业务部","Display": "","Childs": [{"Id": "594ba51357854f739171eb6bc36b00ea","Name": "加工","Url": "","Department": "业务部","Display": "","Childs": []}, {"Id": "8081fa7b8ff24a5cb5a3c2d8ee3eb877","Name": "储运","Url": "","Department": "储运部","Display": "","Childs": []}, {"Id": "8f9ba2fe379b404ab8a5020f9775fc86","Name": "预估","Url": "","Department": "业务部","Display": "","Childs": [{"Id": "869117e2f5604a7d892e04b6a283dc92","Name": "采购","Url": "","Department": "开发采购部","Display": "","Childs": []}]}]}, {"Id": "8f9ba2fe379b404ab8a5020f9775fc86","Name": "预估","Url": "","Department": "业务部","Display": "","Childs": [{"Id": "869117e2f5604a7d892e04b6a283dc92","Name": "采购","Url": "","Department": "开发采购部","Display": "","Childs": []}]}, {"Id": "594ba51357854f739171eb6bc36b00ea","Name": "加工","Url": "","Department": "业务部","Display": "","Childs": []}, {"Id": "a590ea95d3e34c0487e06a33514a9cbb","Name": "付款申请","Url": "","Department": "业务部","Display": "","Childs": []}]}, {"Department": "开发采购部","DepartSort": 4,"NavigatItem": [{"Id": "869117e2f5604a7d892e04b6a283dc92","Name": "采购","Url": "","Department": "开发采购部","Display": "","Childs": []}, {"Id": "66a015f5f5a44b248a6c4a2ce8e4bbfb","Name": "付款申请","Url": "","Department": "开发采购部","Display": "","Childs": []}]}, {"Department": "储运部","DepartSort": 5,"NavigatItem": [{"Id": "8081fa7b8ff24a5cb5a3c2d8ee3eb877","Name": "储运","Url": "","Department": "储运部","Display": "","Childs": []}, {"Id": "0b1281ca43634d1e87ccf1c803570a24","Name": "付款申请","Url": "","Department": "储运部","Display": "","Childs": []}]}, {"Department": "财务部","DepartSort": 6,"NavigatItem": [{"Id": "7ac835496b1946bcbe46d5727a68a172","Name": "付款","Url": "","Department": "财务部","Display": "","Childs": []}]}]}var graph = new joint.dia.Graph;var paper = new joint.dia.Paper({el: $('#paper'),width: 20000,height: 20000,gridSize: 1,model: graph});//定义模块形状function state(x, y, label, a, b) {var cell = new joint.shapes.basic.Rect({position: {x: x,y: y}, //坐标size: {width: 100,height: 50}, //宽高attrs: {rect: {fill: 'rgb(119, 177, 227)',rx: 5,ry: 5,'stroke-width': 0},text: {text: label,'ref-x': .5,'ref-y': .5,fill: '#fff'},}//rect为方形,circle为圆形，还有stroke：边框颜色});graph.addCell(cell);$(a).click(function() {window.open(b);});cell.toBack();return cell;};function link(source, target, label, vertices){var cell = new joint.shapes.fsa.Arrow({source: {id: source.id},target: {id: target.id},labels: [{position: 0.5,attrs: {text: {text: label || '','font-weight': 'bold'}}}],router: {name: 'orthogonal'},connector: {name: 'jumpover'},vertices: vertices || [],attrs: ({'.marker-target': {fill: 'red',d: 'M 10 0 L 0 5 L 10 10 z'}})});graph.addCell(cell);cell.toBack()return cell;}paper.$el.css('pointer-events', 'none')</script><script>var html = ""for(var i = 0; i < json.Item.length; i++) {debuggervar html2 = ""html += "<div class='department''><div class='departmentTop'><p>" + json.Item[i].Department + "</p></div>"for(var o = 0; o < json.Item[i].NavigatItem.length; o++) {html2 += "<div class='departmentnr'><a target='_blank' href='' id=" + json.Item[i].NavigatItem[o].Id + " title=" + json.Item[i].NavigatItem[o].Display + ">" + json.Item[i].NavigatItem[o].Name + "</a></div>"}html += html2 + "</div>"}$(".box").html(html)var num = 100 / json.Item.length - 1 + '%'var arraylist = [];$(".department").css("width", num);$.each(json.Item, function(index, item) {var name = item$.each(item.NavigatItem, function(index, item2) {var id2 = item2.Id;var name2 = item2.Name;var y2 = $("#" + id2).offset().top;var x2 = $("#" + id2).offset().left;debuggervar arrValue2 = arraylist[id2];if(arrValue2 == undefined) {arraylist[id2] = state(x2, y2, name2);}if(item2.Childs.length > 0) {$.each(item2.Childs, function(index, item3) {var id3 = item3.Id;var name3 = item3.Name;var y3 = $("#" + id3).offset().top;var x3 = $("#" + id3).offset().left;var arrValue3 = arraylist[id3];if(arrValue3 == undefined) {arraylist[id3] = state(x3, y3, name3);}link(arraylist[id2], arraylist[id3]);})} else {//                        state(x2, y2, name2);}})})</script>

这个在上一版本有详细讲解，这一版是吧模板引擎去掉了，原因是对jq的版本和template.js有一些要求会导致一系列的错误，没用过模板引擎的会花费一些时间在去看不如直接去掉用js实现，这次并把data详细附上作为参考，基本的代码都在上面了，有不了解可以评论会尽量解答，ps：作者也是上班吃工资的o(╥﹏╥)o，这插件小编也没有接触很久欢迎大家留言一起讨论学习

示例地址：https://gitee.com/Y_Qweb/JointJS/tree/master

JointJS动态流程图升级相关推荐

JointJS动态流程图
最近公司有个导航项目需要做个流程图比较复杂的那种,作为一个前端小菜也是很蒙的,要求就两条一:动态加载流程图:二:动态连线:这两点要求也是难住了一阵呢,最后选择了jointJS,选着原因官网API很详细 ...
系统架构升级要不要上微服务？历“久”弥新微服务——你真的需要升级微服务架构吗
在 <微服务架构设计模式> 一书中,作者总结了关于微服务的一些"重点",原文如下: 中国企业和开发者对微服务架构的热情让我印象深刻.但如同我给所有客户的忠告一样,我想对 ...
使用rancher对Docker容器服务升级
这是笔者以前使用到的一个docker管理工具--rancher 升级服务的步骤记录一下,说不定有人需要或者以后能用上呢? 1.打包好后上传服务器,编写Dockerfile FROM jdk8apli ...
pip 升级之后提示 bash: /usr/bin/pip3: No such file or directory
1. 问题现象 pip 升级之后使用时报错: $ pip3 -V bash: /usr/bin/pip3: No such file or directory 通过命令查找 pip 位置 $ whic ...
旷视MegEngine核心技术升级
旷视MegEngine核心技术升级 7 月 11 日,旷视研究院在 2020 WAIC · 开发者日「深度学习框架与技术生态论坛」上围绕 6 月底发布的天元深度学习框架(MegEngine)Beta ...
计图(Jittor) 1.1版本：新增骨干网络、JIT功能升级、支持多卡训练
计图(Jittor) 1.1版本:新增骨干网络.JIT功能升级.支持多卡训练深度学习框架-计图(Jittor),Jittor的新版本V1.1上线了.主要变化包括: • 增加了大量骨干网络的支持,增强 ...
快手推荐系统及 Redis 升级存储
快手推荐系统及 Redis 升级存储借傲腾™ 补上 DRAM 短板内容简介: · 作为短视频领域的领先企业,快手需要不断导入更先进的技术手段来调整和优化其系统架构,以应对用户量和短视频作品数量的爆 ...
YOLO3升级优化版！Poly-YOLO：支持实例分割！
YOLO3升级优化版!Poly-YOLO:支持实例分割! POLY-YOLO: HIGHER SPEED, MORE PRECISE DETECTION AND INSTANCE SEGMENTATI ...
CentOS7 php7.0 升级到php7.3
不要问我为什么要升级,我不是运维.如果你也不是运维的话,而且是公司的服务器的话,那你还是要慎重啊,我他么的就这样填了一天的坑,简单记录一下这坑爹的一天备份之前的php7.0(这很重要,非常重要) 如 ...

JointJS动态流程图升级

JointJS动态流程图升级相关推荐

最新文章

热门文章