java代码借助插件生成组织架构图并实现导出功能

先说一下需求,前几天产品提出了一个很(恶)好(心)的需求,将组织机构生成架构图并且能导出,数据如下:java代码借助插件生成组织架构图并实现导出功能_第1张图片
下面是架构图

java代码借助插件生成组织架构图并实现导出功能_第2张图片

根据数据和架构图可以看出来,其实就是有父子关系的数据而已,因为是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可以参考版本地址自己修改

整理过的文件案例下载地址

准备工作做完了,下面就可以根据下载的案例去实现自己的功能了

  1. jsp页面导入css样式
<link rel="stylesheet" href="css/jquery.orgchart.css">
<link rel="stylesheet" href="css/style.css">
  1. 再引入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>

  1. 加载数据,这里先将案例中的静态数据(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'

你可能感兴趣的:(闲文杂记,java,前端,开发语言)