树形图插件jOrgChart

最新推荐文章于 2025-10-24 10:52:50 发布

原创最新推荐文章于 2025-10-24 10:52:50 发布 · 1.3k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

插件使用专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何利用jOrgChart插件创建自上而下的组织架构树形图。通过后台查询数据库获取数据，转换为树形结构，并引入必要的js和css文件。数据格式需包含id、pid、name字段，childrens字段用于存放子节点。最终展示的样式可自定义调整。

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

（1）通过后台查询数据库，生成树形数组结构，返回到前台。

（2）需要引入的js插件和css文件：

①jquery.jOrgChart.css

②jquery.min.js

③jquery.jOrgChart.js

（3）使用jOrgChart插件，根据返回的数据将其子节点加入到相应的

中。

首先，我们的数据表应该要有 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 οnclick=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 οnclick=getOrgId("+val.uid+");>"+val.title+"</span>").appendTo(parent);
                    }

               }
            });

        }

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

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