Fatal编程技术网
  • jquery/
  • Jquery 如何从外部数据源生成组织结构图

Jquery 如何从外部数据源生成组织结构图

jquery json

Jquery 如何从外部数据源生成组织结构图,jquery,json,Jquery,Json,我有一个来自jquery的组织结构图，它来自插件和内部json数据，一切都很好，但我不知道如何用相同的数据用ajax调用填充它。有人能帮助我吗。我是组织结构图的新手。提前谢谢。下面是我的代码 html css 您需要在服务器端创建相同的json结构。然后，您可以使用以下代码来构建组织结构图。 假设您在后端使用asp.net mvc，那么您需要使用JsonResult操作结果返回json响应 <!DOCTYPE html> <html lang="en"> <head

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

html css
您需要在服务器端创建相同的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>


组织结构图插件
$（函数（）{
$.mockjax({
url:“/orgchart/initdata”，
答复时间：1000，
contentType:'应用程序/json'，
答复正文：{
‘姓名’：‘劳劳’，
“职务”：“总经理”，
“儿童”：[
{‘姓名’：‘博淼’，‘职务’：‘部门经理’}，
{‘姓名’：‘苏苗’，‘职务’：‘部门经理’，
“儿童”：[
{‘姓名’：‘铁华’，‘职称’：‘高级工程师’}，
{‘姓名’：‘嘿嘿’，‘头衔’：‘高级工程师’，
“儿童”：[
{'name'：'Pang-Pang'，'title'：'engineer'}，
{“姓名”：“祥祥”，“职称”：“UE工程师”}
]
}
]
},
{‘姓名’：‘于洁’，‘职务’：‘部门经理’}，
{‘姓名’：‘俞莉’，‘头衔’：‘部门经理’}，
{‘姓名’：‘洪淼’，‘职务’：‘部门经理’}，
{‘姓名’：‘于伟’，‘职务’：‘部门经理’}，
{‘姓名’：‘春苗’，‘头衔’：‘部门经理’}，
{‘姓名’：‘于铁’，‘职务’：‘部门经理’}
]
}
});
$（“#图表容器”）.orgchart({
“数据”：“/orgchart/initdata”，
“节点内容”：“标题”
});
});
请按照此操作

我解决此问题，它可能对某些人有用

html 1.json
在这个URL中，他们没有给出编码示例，只是给出了示例。到目前为止，我只想从json调用进行测试。 
'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);

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;
}

<!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>

<!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>

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

  });
})(jQuery);

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