前端根据json数据，递归解析数据，生成树形组织图_递归式生成模型架构图

---

接收的json数据结构

test.json（文件示例）：

[
  {
    "children": [
      {
        "children": [],
        "id": "3",
        "orgName": "汽车营销业",
        "pid": "root"
      },
      {
        "children": [
          {
            "children": [],
            "id": "12",
            "orgName": "公司名称12",
            "pid": "2"
          },
          {
            "children": [],
            "id": "11",
            "orgName": "公司名称11",
            "pid": "2"
          }
        ],
        "id": "2",
        "orgName": "物流业",
        "pid": "root"
      },
      {
        "children": [
          {
            "children": [],
            "id": "123",
            "orgName": "公司名称1",
            "pid": "1"
          }
        ],
        "id": "1",
        "orgName": "客运业",
        "pid": "root"
      }
    ],
    "id": "root",
    "orgName": "总体",
    "pid": ""
  }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

前端处理

1.引入js文件及css样式

前端生成树形结构需要的所有js文件总结：

	<link rel="stylesheet" href="css/jquery.jOrgChart.css"/>
    <script src="layui/layui.js"
            charset="utf-8"></script>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/aboutLayui.js"></script>
    <script  src="js/html2canvas.js"></script>
    <script  src="js/html2canvas.min.js"></script>
    <script type='text/javascript' src="js/jquery.jOrgChart.js"></script>
 	 	
1
2
3
4
5
6
7
8
9

2.html结构

html代码结构部分，装载树形组织结构图的容器。

<!-- 树状组织结构图 -->
<div id='jOrgChart' class='test'></div>
1
2

3. js代码渲染画面

使用ajax获取json文件的内容，递归解析json数据，使用前端自带的框架生成组织结构图

	$.ajax({
        url: "test.json",
        type: 'GET',
        dataType: 'json',
        success: function(result){
            var showlist = $("<ul id='org' style='display:none'></ul>");
            showall(JSON.parse(result.data), showlist);
            $("#jOrgChart").append(showlist);
            $("#org").jOrgChart( {
                chartElement : '#jOrgChart',//指定在某个dom生成jorgchart
                dragAndDrop : false //设置是否可拖动 
            });
        }
    });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

//递归生成树形组织结构图
function showall(menu_list, parent) {
    $.each(menu_list, function(index, val) {
        if( val.children.length > 0){
            var li = $("<li></li>");
            li.append("<a href='javascript:void(0)' οnclick=getOrgId("+val+");>"+val.orgName+"</a>").append("<ul></ul>").appendTo(parent);
            //递归显示
            showall(val.children, $(li).children().eq(1));
        }else{
            $("<li></li>").append("<a href='javascript:void(0)' οnclick=getOrgId("+val+");>"+val.orgName+"</a>").appendTo(parent);
        }
    });

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

效果图

展示效果：