我这里找的是 OrgChart 插件;
地址: GitHub - dabeng/OrgChart: It's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart.
这里面能满足你对组织架构图的一切需求! ! !
例: 按需加载 / 拖拽 / 编辑 / 自定义 / 折叠 / 从左往右 / 从右往左 / 混合(水平+垂直) / 节点定位 等;
我这里主要使用了 jQuery版本 的混合(水平+垂直)的案例:
主要讲解 jQuery中如何使用 OrgChart 插件:
1. 打开 GitHub地址后,点击 ES6 Version
2. 点击 ES6 Version 后才会出现 jQuery version
3. 下面会提示你只需要引入 dist 目录下
js => jquery.orgchart.js
css => jquery.orgchart.css
这两个文件就是 OrgChart 的核心文件! ! !
4. 下面只需要把这两个文件copy到你的项目中,在你的html中引入即可;
如果你具体不知道怎么引入的话,还有方法可以让你更加的清晰! ! !
进入到 jQuery版本模式后,点击 Demos based on nested ul (基于嵌套ul的演示)
选中一个你想要的进去
把对应的文件copy到你的项目中,但是js中的写法可能得需要你自己修改一下;
修改前:
// 修改前
(function($) {
$(function() {
var ds = {
name: "Lao Lao",
title: "general manager",
children: [
{ name: "Bo Miao", title: "department manager" },
{
name: "Su Miao",
title: "department manager",
children: [
{
name: "Hei Hei",
title: "senior engineer",
children: [
{ name: "Pang Pang", title: "engineer" },
{
name: "Xiang Xiang",
title: "UE engineer",
children: [
{ name: "Dan Dan", title: "engineer" },
{
name: "Er Dan",
title: "engineer",
children: [
{ name: "Xuan Xuan", title: "intern" },
{ name: "Er Xuan", title: "intern" }
]
}
]
}
]
}
]
},
{ name: "Hong Miao", title: "department manager" },
{
name: "Chun Miao",
title: "department manager",
children: [
{ name: "Bing Qin", title: "senior engineer"},
{ name: "Yue Yue", title: "senior engineer",
children: [
{ name: "Er Yue", title: "engineer"},
{ name: "San Yue", title: "engineer" },
{ name: "Si Yue", title: "UE engineer" }
]
}
]
}
]
};
var oc = $("#chart-container").orgchart({
data: ds,
nodeContent: "title",
verticalLevel: 3,
visibleLevel: 4
});
});
})(jQuery);
修改后:
// 修改后
var ds = {
name: "Lao Lao",
title: "general manager",
children: [
{ name: "Bo Miao", title: "department manager" },
{
name: "Su Miao",
title: "department manager",
children: [
{
name: "Hei Hei",
title: "senior engineer",
children: [
{ name: "Pang Pang", title: "engineer" },
{
name: "Xiang Xiang",
title: "UE engineer",
children: [
{ name: "Dan Dan", title: "engineer" },
{
name: "Er Dan",
title: "engineer",
children: [
{ name: "Xuan Xuan", title: "intern" },
{ name: "Er Xuan", title: "intern" }
]
}
]
}
]
}
]
},
{ name: "Hong Miao", title: "department manager" },
{
name: "Chun Miao",
title: "department manager",
children: [
{ name: "Bing Qin", title: "senior engineer"},
{ name: "Yue Yue", title: "senior engineer",
children: [
{ name: "Er Yue", title: "engineer"},
{ name: "San Yue", title: "engineer" },
{ name: "Si Yue", title: "UE engineer" }
]
}
]
}
]
};
var oc = $("#chart-container").orgchart({
data: ds,
nodeContent: "title",
verticalLevel: 3,
visibleLevel: 4
});下面是完整代码:
<link rel="stylesheet" href="../src/views/custom/pages/szbb/homePlugin/css/jquery.orgchart.css"/>
<style>
#chart-container {
position: relative;
font-family: Arial;
height: 540px;
border: 1px solid #aaa;
border-radius: 5px;
overflow: auto;
text-align: center;
}
.orgchart {
padding-bottom: 20px;
}
#github-link {
display: inline-block;
background-image: url("https://dabeng.github.io/OrgChart/img/logo.png");
background-size: cover;
width: 64px;
height: 64px;
position: absolute;
top: 0px;
left: 0px;
}
</style>
<div id="chart-container"></div>
<script src="../src/views/custom/pages/szbb/homePlugin/js/jquery.orgchart.js"></script>
<script>
var ds = {
name: "Lao Lao",
title: "general manager",
children: [
{ name: "Bo Miao", title: "department manager" },
{
name: "Su Miao",
title: "department manager",
children: [
{
name: "Hei Hei",
title: "senior engineer",
children: [
{ name: "Pang Pang", title: "engineer" },
{
name: "Xiang Xiang",
title: "UE engineer",
children: [
{ name: "Dan Dan", title: "engineer" },
{
name: "Er Dan",
title: "engineer",
children: [
{ name: "Xuan Xuan", title: "intern" },
{ name: "Er Xuan", title: "intern" }
]
}
]
}
]
}
]
},
{ name: "Hong Miao", title: "department manager" },
{
name: "Chun Miao",
title: "department manager",
children: [
{ name: "Bing Qin", title: "senior engineer"},
{ name: "Yue Yue", title: "senior engineer",
children: [
{ name: "Er Yue", title: "engineer"},
{ name: "San Yue", title: "engineer" },
{ name: "Si Yue", title: "UE engineer" }
]
}
]
}
]
};
var oc = $("#chart-container").orgchart({
data: ds,
nodeContent: "title",
verticalLevel: 3,
visibleLevel: 4
});
</script>
