之前写了一片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>")
debugger
var id1 = item1[index2].id
var arrValue1 = arraylist[id1];
var y = $("#" + id1).offset().top;
var x = $("#" + id1).offset().left;
var name = item1[index2].name
if(arrValue1 == undefined) {
arraylist[id1] = shape(x, y, name);
}
if(item1[index2].tolink != "") {
var id2 = item1[index2].tolink
var arrValue2 = arraylist[id2];
var y2 = $("#" + id2).offset().top;
var x2 = $("#" + id2).offset().left;
var state = item1[index2].state
if(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>")
debugger
var id1 = item1[index2].id
var arrValue1 = arraylist[id1];
var y = item1[index2].poy;
var x = item1[index2].pox;
var name = item1[index2].name
if(arrValue1 == undefined) {
arraylist[id1] = poit(x, y, name);
}
if(item1[index2].tolink != "") {
var id2 = item1[index2].tolink
var arrValue2 = arraylist[id2];
var y2 = $("#" + id2).offset().top;
var x2 = $("#" + id2).offset().left;
var state = item1[index2].state
if(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++) {
debugger
var 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;
debugger
var 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，这插件小编也没有接触很久欢迎大家留言一起讨论学习
466
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
