先说一下需求,前几天产品提出了一个很(恶)好(心)的需求,将组织机构生成架构图并且能导出,数据如下:
下面是架构图
根据数据和架构图可以看出来,其实就是有父子关系的数据而已,因为是Java项目且使用的前端是jsp,而博主对前端又不是那么精通,平时都是粘贴复制修改而已,在已知功能中是没办法实现的。木得办法,只能看网上是否有第三方插件能实现此功能了,在找了1天后,终于还是找到了实现的方法,可以通过第三方插件实现此次需求,不过导出的图片有些模糊,网上说这是插件的问题,目前只能凑合着用,若对导出图片有非常高的清晰度的需求,请自行再想办法吧。。。
话不多说,先说一下使用的插件和下载地址,然后下面会说一下本次需求的实现方法和部分代码:
orgChart:基于ES6的组织结构图插件。
下载地址:orgChart下载;可能看其他的博主是gitHub的下载地址,但gitHub上没有示例,这里下载的压缩包里是有案例的,但还是缺少一些js和css,下面会说明缺少的js和css的下载地址。
下载后可直接看demo文件夹下的示例
jquery.min.js:下载地址不再多说
jquery.orgchart.js:下载的zip中src下已经有了
html2canvas.min.js:生成图片必不可少的js,点击下载
jquery.mockjax.min.js:这个忘记作用了,不过记得报过404错误,所以还是下载下来吧。下载地址
jspdf.min.js:导出图片不可少;查看版本地址;官网下载地址,会让填写一些信息,随便填就行; gitHub下载地址后面的v1.5.2可以参考版本地址自己修改
准备工作做完了,下面就可以根据下载的案例去实现自己的功能了
- jsp页面导入css样式
<link rel="stylesheet" href="css/jquery.orgchart.css">
<link rel="stylesheet" href="css/style.css">
- 再引入js
<%--这里未引入jquery.mockjax.min.js,这个js应该是ajax加载数据时需要--%>
<div id="chart-container" style=""></div> <!--定义加载数据的div,id下面要用到-->
<script type="text/javascript" src="${ctxStaticUrl}/static/js/jquery.min.js"></script>
<script type="text/javascript" src="${ctxStaticUrl}/static/js/html2canvas.min.js"></script>
<script type="text/javascript" src="${ctxStaticUrl}/static/js/jspdf.min.js"></script>
<script type="text/javascript" src="${ctxStaticUrl}/static/js/jquery.orgchart.js"></script>
- 加载数据,这里先将案例中的静态数据(json格式)拿过来,下面会从代码中获取并封装成这样的json数据
<script type="text/javascript">
$(function() {
var datascource = {
'name': 'Lao Lao',
'title': 'general manager',
'children': [
{
'name': 'Bo Miao', 'title': 'department manager' },
{
'name': 'Su Miao', 'title': 'department manager',
'children': [
{
'name': 'Tie Hua', 'title': 'senior engineer' },
{
'name': 'Hei Hei', 'title':