前端根据json数据，递归解析数据，生成树形组织图

• 接收的json数据结构
• 前端处理
• • 1.引入js文件及css样式
  • 2.html结构
  • 3. js代码渲染画面
• 效果图

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

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

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

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

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

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

}

展示效果：