jsplumb-2.9.2.min.js 百度网盘下载 提取码：sgjd
先来看看效果图
来不及解释了，直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>连线图demo</title>
<style>
body{
display: flex;
justify-content: center;
background-color: rgb(230,230,230);
}
#dTree{
margin: 0;
padding: 0;
width: 1000px;
background-color: rgba(0,0,0,0.5);
border-radius: 10px;
}
#dTree>div{
display: flex;
justify-content: space-between;
/*margin-top: 80px;*/
height: 600px;
}
#dTree .graph_body {
display: flex;
flex-flow: column;
justify-content: center;
}
#dTree .graph_item {
width: 400px;
height: 50px;
display: flex;
/*justify-content: flex-end;*/
}
#dTree .graph_left_item {
background-size: 100% 100%;
justify-content: flex-end;
}
/*#dTree .graph_right_item {*/
/*background-size: 100% 100%;*/
/*}*/
#dTree .graph_item p {
margin: 0;
color: #00f3ff;
height: 50px;
line-height: 50px;
font-size: 15px;
}
</style>
</head>
<body>
<div id="dTree"></div>
<script type="text/javascript" src="js/jsplumb-2.9.2.min.js"></script>
<script>
//生成节点
;(function(){
let data = {"left":[
"左1","左2","左3","左4","左5",
"左6","左7","左8","左9","左10"
],"right":[
"右1","右2","右3","右4","右5",
"右6","右7","右8"
]};
let body = "<div>";
let graph_left = "<div id='graph_left' class='graph_body'>"; //左边节点父盒子
let graph_right = "<div id='graph_right' class='graph_body'>"; //右边节点父盒子
//塞盒子，每个盒子起名一个id,且id中包含了这个盒子是左边还是右边
for (let i = 0; i < data.left.length; i++)
graph_left += "<div class='graph_item graph_left_item' id='itemLeft"+(i+1)+"'><p>"+data.left[i]+"</p></div>"; //将节点塞入左边父盒子
for (let i = 0; i < data.right.length; i++)
graph_right += "<div class='graph_item graph_right_item' id='itemRight"+(i+1)+"'><p>"+data.right[i]+"</p></div>";//将节点塞右边父盒子
graph_left+="</div>";
graph_right+="</div>";
body += graph_left + graph_right; //将左右两边的大盒子塞入body中
body += "</div>";
document.getElementById("dTree").innerHTML = body;
})();
</script>
<script>
jsPlumb.ready(function () {
let _itemList = document.querySelectorAll(".graph_item"); //获取到页面所有需要连线的盒子
let _itemLeft = [];
let _itemRight = [];
_itemList.forEach(function (item) { //遍历需要连线的盒子，且根据自定义id名称区分左右列表
let id = item.id;
//将盒子放入对应的两个数组中保存
if (id.indexOf("Left") >= 0) _itemLeft.push(id);
else _itemRight.push(id);
});
let common = { //设置连接样式
anchor: ['Left', 'Right'], //设置从左往右连接
paintStyle: {stroke: 'lightgray', strokeWidth: 1}, //连接线的颜色/粗细
// paintStyle: {stroke: 'rgb(255,255,255)', strokeWidth: 1},
connector: ['Bezier',{curviness:150}], //第一个参数: 连接线类型四五种比较繁杂,可百度参考.第二个参数:是该类型有的一个参数,控制连接线弧度,不设置时默认150
endpoint: ["Rectangle", {width: 1, height: 1}] //连接点样式.通过调节宽度高度可以看到效果
};
//开始连线 连线规则:左边每个盒子需要连接右边的每个盒子
_itemLeft.forEach(left=>{
_itemRight.forEach(right=>{
//以下两种方式皆可以绘制。
//区别: 我在使用过程中只发现了一个区别.一开始我用的是方式二。但是当页面出现了多个jsPlumb.ready(fun)时连线的位置就出现了混乱。所以建议使用方式一来生成连接线
//方式一（推荐）
jsPlumb.getInstance().connect({ //创建连线
source: left, //连线起点
target: right //连线终点
}, common); //其他样式
//方式二
//jsPlumb.connect({ //创建连线
// source: left, //连线起点
// target: right //连线终点
//}, common); //其他样式
})
})
});
</script>
</body>
</html>
网友评论