应用错误收集

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

时间：2018-07-27 02:30:40

标签： jquery json

我有一个来自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;
}

2 个答案:

答案 0 :(得分：0)

您需要在服务器端创建相同的json结构。您可以使用以下代码来构建组织结构图。假设您在后端使用asp.net mvc，则需要使用JsonResult操作结果返回json响应。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Organization Chart Plugin</title>
  <link rel="icon" href="img/logo.png">
  <link rel="stylesheet" href="css/font-awesome.min.css">
  <link rel="stylesheet" href="css/jquery.orgchart.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div id="chart-container"></div>

  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery.mockjax.min.js"></script>
  <script type="text/javascript" src="js/jquery.orgchart.js"></script>
  <script type="text/javascript">
    $(function() {

      $.mockjax({
        url: '/orgchart/initdata',
        responseTime: 1000,
        contentType: 'application/json',
        responseText: {
          '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': 'Yu Jie', 'title': 'department manager' },
            { 'name': 'Yu Li', 'title': 'department manager' },
            { 'name': 'Hong Miao', 'title': 'department manager' },
            { 'name': 'Yu Wei', 'title': 'department manager' },
            { 'name': 'Chun Miao', 'title': 'department manager' },
            { 'name': 'Yu Tie', 'title': 'department manager' }
          ]
        }
      });

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

    });
  </script>
  </body>
</html>

请遵循此https://github.com/dabeng/OrgChart

答案 1 :(得分：0)

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

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"
        }
    ]
}