jOrgChart树形图插件

最新推荐文章于 2025-04-01 21:16:15 发布

郭晓湉

最新推荐文章于 2025-04-01 21:16:15 发布

阅读量7.3k

点赞数

分类专栏： Html

本文链接：https://blog.youkuaiyun.com/xtqueen/article/details/76145558

版权

Html 专栏收录该内容

77 篇文章

订阅专栏

本文介绍了如何利用jOrgChart插件来构建自上而下的组织架构图。首先，通过后台查询数据库获取数据，转换为树形数组结构。接着，引入必要的js和css文件，如jquery.min.js和jquery.jOrgChart.js。数据结构要求包含id、pid和childrens字段，用于构建树形关系。最后，展示实现效果的html页面和截图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目要做组织架构图，要把它做成自上而下的树形结构。
一、说明

（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字段作为要显示的文本内容：

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

code    0
data    Object
uid "6294415815978516480"
score   "90000"
username    "温延伟"
tel "13904994549"
title   "温延伟[900]<br>13904994549"
children    [2]
0   Object
uid "6294683425546698753"
username    "温延伟"
tel "18524734549"
score   "1800000"
title   "温延伟[18000]<br>18524734549"
children    [2]
0   Object
uid "6294694328581226497"
username    "张素珍"
tel "13130743645"
score   "1800000"
title   "张素珍[18000]<br>13130743645"
children    [2]
0   Object
1   Object
1   Object
uid "6294710632713289729"
username    "孙国玲"
tel "13008285871"
score   "1800000"
title   "孙国玲[18000]<br>13008285871"
children    [2]
0   Object
uid "6294770372805918721"
username    "邓双全"
tel "13512613562"
score   "1800000"
title   "邓双全[18000]<br>13512613562"
children    []
1   Object
uid "6294771260823961600"
username    "朱细兰"
tel "15845164958"
score   "1800000"
title   "朱细兰[18000]<br>15845164958"
children    [2]
1   Object
uid "6295594377238544384"
username    "甜甜"
tel "13146095554"
score   "90000"
title   "甜甜[900]<br>13146095554"
children    [2]
0   Object
uid "6295597534249222144"
username    "必胜客"
tel "13146097777"
score   "90000"
title   "必胜客[900]<br>13146097777"
children    []
1   Object
uid "6295597982809063425"
username    "534534"
tel "13146096666"
score   "90000"
title   "534534[900]<br>13146096666"
children    []

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 () {
           get(window.apistore.URL_TREE,{},function (r) {
                if(r.code == 0){
                  var showlist = $("<ul id='org' style='display:none'></ul>");
                  showall([r.data], showlist);
                  $("#jOrgChart").append(showlist);
                  $("#org").jOrgChart( {
                      chartElement : '#jOrgChart',//指定在某个dom生成jorgchart

                     });
              }
          });
      });
        function showall(menu_list, parent) {
            $.each(menu_list, function(index, val) {
                if(val.children != undefined && val.children.length > 0){
                    var li = $("<li></li>");
                    li.append("<span onclick=getOrgId("+val.uid+");>"+val.title+"</span>").append("<ul></ul>").appendTo(parent);
                    //递归显示
                    showall(val.children, $(li).children().eq(1));
                }else{
                    if (val.title != undefined){
                      $("<li></li>").append("<span onclick=getOrgId("+val.uid+");>"+val.title+"</span>").appendTo(parent);
                    }

               }
            });

        }

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