使用jOrgChart插件实现组织架构图的展示

项目要做组织架构图,要把它做成自上而下的树形结构。

一、说明

(1)通过后台查询数据库,生成树形数组结构,返回到前台。

(2)需要引入的js插件和css文件:

  ①jquery.jOrgChart.css

  ②jquery.min.js

  ③jquery.jOrgChart.js

(3)使用jOrgChart插件,根据返回的数据将其子节点加入到相应的<li></li>中。

首先,我们的数据表应该要有 id(节点),pid(父节点的id),name的字段,

那么我们要把这个数组转为树形数组结构,即将各个元素放在 pid 父类元素的 childrens字段中,下面就是简单生成树形数组的代码。至于展示出来的样式,可以在html页面中添加自定义样式覆盖它之前的样式。

注意:

  后台返回的数据格式必须如下,其中id,pid字段为必须要有。childrens字段也为必须的,不过字段名可以自己定义,name字段是根据自己业务需求的字段,在这里以name字段作为要显示的文本内容:

{
  "data": [{
    "id": 1,
    "name": "企业主体信用得分",
    "pid": null,
    "childrens": [
      {
        "id": 2,
        "name": "企业素质",
        "pid": 1,
        "childrens": [
          {
            "id": 5,
            "name": "基本信息",
            "pid": 2,
            "childrens": [
              {
                "id": 10,
                "name": "企业主体信息识别",
                "pid": 5,
                "childrens": [
                ]
              },
              {
                "id": 11,
                "name": "企业持续注册时间",
                "pid": 5,
                "childrens": [
                ]
              },
              {
                "id": 12,
                "name": "注册资本",
                "pid": 5,
                "childrens": [
                ]
              }
            ]
          },
          {
            "id": 6,
            "name": "管理认证",
            "pid": 2,
            "childrens": [
              {
                "id": 13,
                "name": "国际性管理认证",
                "pid": 6,
                "childrens": [
                ]
              }
            ]
          }
        ]
      },
      {
        "id": 3,
        "name": "履约记录",
        "pid": 1,
        "childrens": [
          {
            "id": 7,
            "name": "税务执行情况",
            "pid": 3,
            "childrens": [
              {
                "id": 14,
                "name": "是否按时缴纳税款",
                "pid": 7,
                "childrens": [
                ]
              }
            ]
          },
          {
            "id": 8,
            "name": "网贷情况",
            "pid": 3,
            "childrens": [
              {
                "id": 15,
                "name": "网贷逾期",
                "pid": 8,
                "childrens": [
                ]
              }
            ]
          }
        ]
      },
      {
        "id": 4,
        "name": "公共监督",
        "pid": 1,
        "childrens": [
          {
            "id": 9,
            "name": "行政处罚",
            "pid": 4,
            "childrens": [
              {
                "id": 16,
                "name": "处罚信息",
                "pid": 9,
                "childrens": [
                ]
              }
            ]
          }
        ]
      }
    ]
  }
]
}

二、实例:

1、json文件(test.json)(即后台接口返回的json格式的数据)

{
  "data": [{
    "id": 1,
    "name": "企业主体信用得分",
    "pid": null,
    "childrens": [
      {
        "id": 2,
        "name": "企业素质",
        "pid": 1,
        "childrens": [
          {
            "id": 5,
            "name": "基本信息",
            "pid": 2,
            "childrens": [
              {
                "id": 10,
                "name": "企业主体信息识别",
                "pid": 5,
                "childrens": [
                ]
              },
              {
                "id": 11,
                "name": "企业持续注册时间",
                "pid": 5,
                "childrens": [
                ]
              },
              {
                "id": 12,
                "name": "注册资本",
                "pid": 5,
                "childrens": [
                ]
              }
            ]
          },
          {
            "id": 6,
            "name": "管理认证",
            "pid": 2,
            "childrens": [
              {
                "id": 13,
                "name": "国际性管理认证",
                "pid": 6,
                "childrens": [
                ]
              }
            ]
          }
        ]
      },
      {
        "id": 3,
        "name": "履约记录",
        "pid": 1,
        "childrens": [
          {
            "id": 7,
            "name": "税务执行情况",
            "pid": 3,
            "childrens": [
              {
                "id": 14,
                "name": "是否按时缴纳税款",
                "pid": 7,
                "childrens": [
                ]
              }
            ]
          },
          {
            "id": 8,
            "name": "网贷情况",
            "pid": 3,
            "childrens": [
              {
                "id": 15,
                "name": "网贷逾期",
                "pid": 8,
                "childrens": [
                ]
              }
            ]
          }
        ]
      },
      {
        "id": 4,
        "name": "公共监督",
        "pid": 1,
        "childrens": [
          {
            "id": 9,
            "name": "行政处罚",
            "pid": 4,
            "childrens": [
              {
                "id": 16,
                "name": "处罚信息",
                "pid": 9,
                "childrens": [
                ]
              }
            ]
          }
        ]
      }
    ]
  }
]
}

2、html页面(test.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jOrgChart异步加载</title>
    <link rel="stylesheet" href='jquery.jOrgChart.css'/>
    <script type='text/javascript' src='jquery.min.js'></script>
    <script type='text/javascript' src='jquery.jOrgChart.js'></script>
    <style>
        a {
            text-decoration: none;
            color: #fff;
            font-size: 12px;
        }
        .jOrgChart .node {
            width: 120px;
            height: 50px;
            line-height: 50px;
            border-radius: 4px;
            margin: 0 8px;
        }
    </style>
</head>
<body>
<!--显示组织架构图-->
<div id='jOrgChart'></div>


<script type='text/javascript'>
    $(function(){
        //数据返回
        $.ajax({
            url: "test.json",
            type: 'GET',
            dataType: 'JSON',
            data: {action: 'org_select'},
            success: function(result){
                var showlist = $("<ul id='org' style='display:none'></ul>");
                showall(result.data, showlist);
                $("#jOrgChart").append(showlist);
                $("#org").jOrgChart( {
                    chartElement : '#jOrgChart',//指定在某个dom生成jorgchart
                    dragAndDrop : false //设置是否可拖动
                });

            }
        });
    });

    function showall(menu_list, parent) {
        $.each(menu_list, function(index, val) {
            if(val.childrens.length > 0){

                var li = $("<li></li>");
                li.append("<a href='javascript:void(0)' onclick=getOrgId("+val.id+");>"+val.name+"</a>").append("<ul></ul>").appendTo(parent);
                //递归显示
                showall(val.childrens, $(li).children().eq(1));
            }else{
                $("<li></li>").append("<a href='javascript:void(0)' onclick=getOrgId("+val.id+");>"+val.name+"</a>").appendTo(parent);
            }
        });

    }

</script>
</body>
</html>

3、效果图(打开test.html页面后即可看到如下效果)

注意:由于数据是由ajax异步请求获取到的,所以直接双击html文件打开是不行的,需要在服务器环境下运行。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java技术

【面试题】2018年最全Java面试通关秘籍第三套!

注:本文是从众多面试者的面试经验中整理而来,其中不少是本人出的一些题目,网络资源众多,如有雷同,纯属巧合!禁止一切形式的碰瓷行为!未经允许禁止一切形式的转载和复...

851
来自专栏知识分享

STM32 中 BIT_BAND(位段/位带)和别名区使用入门(转载)

一、 什么是位段和别名区 是这样的,记得MCS51吗? MCS51就是有位操作,以一位(BIT)为数据对象的操作,MCS51可以简单的将P1口的第2位独立操作:...

3449
来自专栏blackheart的专栏

[信息安全] 4.一次性密码 && 身份认证三要素

在信息安全领域,一般把Cryptography称为密码,而把Password称为口令。日常用户的认知中,以及我们开发人员沟通过程中,绝大多数被称作密码的东西其...

2496
来自专栏圣杰的专栏

ABP入门系列(10)——扩展AbpSession

源码路径:Github-LearningMpaAbp 一、AbpSession是Session吗? 1、首先来看看它们分别对应的类型是什么? 查看源码发现Ses...

2856
来自专栏hrscy

RxSwift - Why

官方建议总是使用 .addDisposableTo(disposeBag) 即使对于简单绑定来说那不是必要的。

1092
来自专栏工科狗和生物喵

FreeRTOS-Qemu 实现三任务同步通信机制以及API信息

---- 1. 本次作业的考察要点: 作业地址:https://github.com/HustWolfzzb/STM32F429DiscoveryFreeRTO...

7996
来自专栏微信公众号:Java团长

即将发布的 JDK 10 有 109 项新特性,你喜欢哪些?

按计划,JDK 10 将于 3 月 20 日正式发布。据前 Oracle 员工 Simon Ritter 的统计,JDK 10 总共包含 109 项新特性。当然...

582
来自专栏c#开发者

C#开发终端式短信的原理和方法

简介   没发过短信的年轻人肯定是属于那种受保护的稀有动物,通讯发达的今天短信已经成为人们交流的重要手段,其中也蕴含着巨大的市场和经济利益,掌握短信技术的人才也...

3449
来自专栏Albert陈凯

Spark详解05架构Architecture架构

架构 前三章从 job 的角度介绍了用户写的 program 如何一步步地被分解和执行。这一章主要从架构的角度来讨论 master,worker,driver ...

2838
来自专栏公有云大数据平台弹性 MapReduce

yarn公平调度详细分析(一)

FairScheduler是yarn常用的调度器,但是仅仅参考官方文档,有很多参数和概念文档里没有详细说明,但是这些参明显会影响到集群的正常运行。本文的主要目的...

84017

扫码关注云+社区