时间戳

首页 > 解决方案 > 如何从外部数据源制作组织结构图

jquery - 如何从外部数据源制作组织结构图

问题描述

我有一个来自 jquery 组织结构图的组织结构图，它来自插件和内部 json 数据，一切正常，但我不知道如何用相同数据的 ajax 调用填充它。谁能帮帮我。我是新来的到组织结构图。提前致谢。下面是我的代码。

html

<div id="chart-container"></div>

<a id="github-link" href="https://github.com/dabeng/OrgChart" target="_blank"><i class="fa fa-github-square"></i></a>

javascript

'use strict';

(function($){

  $(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': 'senior engineer',
              'children': [
                { 'name': 'Pang Pang', 'title': 'engineer' },
                { 'name': 'Xiang Xiang', 'title': 'UE engineer' }
              ]
            }
          ]
        },
        { 'name': 'Hong Miao', 'title': 'department manager' },
        { 'name': 'Chun Miao', 'title': 'department manager' }
      ]
    };

    $('#chart-container').orgchart({
      'data' : datascource,
      'nodeContent': 'title'
    });

  });

})(jQuery);

css

body {
  color: #fff;
  background-image: url(http://dabeng.github.io/OrgChart/img/background.jpg);
}

#github-link {
  position: fixed;
  top: 0px;
  right: 10px;
  font-size: 3em;
  color: #fff;
}

.orgchart {
  background: rgba(0, 0, 0, 0.5);
}

.orgchart .node .title {
  background-color: #fff;
  color: #000;
}

.orgchart .node .content {
  border-color: transparent;
  border-top-color: #333;
}

.orgchart .node:hover {
  background-color: rgba(255, 255, 0, 0.6);
}

.orgchart .node.focused {
  background-color: rgba(255, 255, 0, 0.6);
}

.orgchart .node .edge {
  color: rgba(0, 0, 0, 0.6);
}

.orgchart .edge:hover {
  color: #000;
}

.orgchart td.left,
.orgchart td.top,
.orgchart td.right {
  border-color: #fff;
}

.orgchart td>.down {
  background-color: #fff;
}

标签： jqueryjson

解决方案

我解决了这个问题，它可能对某些人有用

html

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Organization Chart -- json datasource</title>  
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://rawgit.com/dabeng/OrgChart/master/demo/css/jquery.orgchart.css'>  
</head>
<body>
  <div id="chart-container"></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://rawgit.com/dabeng/OrgChart/master/demo/js/jquery.orgchart.js'></script>
    <script  src="js/index.js"></script>
</body>

</html>

index.js

(function($) {
  $(function() {
    var oc = $('#chart-container').orgchart({
      'data' : '1.json',
      'depth': 2,
      'nodeContent': 'title'
    });

  });
})(jQuery);

1.json

{
    "name": "Lao Lao",
    "children": [{
            "name": "Bo Miao"
        },
        {
            "name": "Su Miao",
            "children": [{
                    "name": "Tie Hua"
                },
                {
                    "name": "Hei Hei",
                    "children": [{
                            "name": "Pang Pang"
                        },
                        {
                            "name": "Xiang Xiang"
                        }
                    ]
                }
            ]
        },
        {
            "name": "Hong Miao"
        },
        {
            "name": "Chun Miao"
        }
    ]
}

推荐阅读