jOrgChart二叉树效果

引进文件：

 <link rel="stylesheet" type="text/css" href="Public/com/jQrgChart/jquery.jOrgChart.css">
 <script src="Public/com/jQrgChart/jquery.jOrgChart.js"></script>

HTML：

 <div id='jOrgChart'></div>//容器

js：

 //自己项目(动态添加，逐条添加)
 <script type="text/javascript">
 $(function(){
   Getjiedian();
 })
 var arr = [];
 function Getjiedian(){
   $.get(location.href,function(data){
       var showlist = $("<ul id='org' style='display:none'></ul>");
       arr.push(data.info);
       showall(arr, showlist);
       $("#jOrgChart").append(showlist);
       $("#org").jOrgChart( {
           chartElement : '#jOrgChart',//指定在某个dom生成jorgchart
           dragAndDrop : false //设置是否可拖动
       });
   },"JSON")
 }
   function showall(infos, parent) {
       $.each(infos, function(e,val) {
           var li = $("<li class='li_id"+ val.id +"'></li>");
            var str = "";
               str +=       '<div class="tree" data-index="'+e+'" data-id='+val.id+'>';
               str +=            '<div class="useImg">';
               str +=               '<img class="middleY" src="'+val.headimgurl+'" alt="">';
               str +=           '</div>';
               str +=           '<p class="useName">'+val.nickname+'</p>';
               str +=           '<p class="useNum">已审核:'+ val.num +'人</p>';
               str +=        '</div>';
            li.append("<div onclick='GetElse("+ val.id +")'>"+str+"</div>").append("<ul></ul>").appendTo(parent);
           showall(val.list,$(li).children().eq(1));
       });
     }

     function GetElse(id){
       var leng = $(".li_id" + id).children().eq(1).children().length;
       if(leng == 0){
           var vals  = $(".li_id" + id).children().eq(1);
           var data ={
             'id':id
           }
           $.get("{:U('UserWx/jiedianfind')}",data,function(res){
           var info = res.list;
             $.each(info, function(e,val) {
                 var li = $("<li class='li_id"+ val.id +"'></li>");
                  var str = "";
                     str +=       '<div class="tree" data-index="'+e+'"  data-id='+val.id+'>';
                     str +=            '<div class="useImg">';
                     str +=               '<img class="middleY" src="'+val.headimgurl+'" alt="">';
                     str +=           '</div>';
                     str +=           '<p class="useName">'+val.nickname+"  "+' </p>';
                     str +=           '<p class="useNum">已审核:'+ val.num +'人</p>';
                     str +=        '</div>';
                  li.append("<div onclick='GetElse("+ val.id +")';>"+str+"</div>").append("<ul></ul>").appendTo(vals);
            })
　　　　　　　　//重置显示容器
             var htmls = $("#org");
             $("#jOrgChart").html("");
             $("#jOrgChart").append(htmls);
             $("#org").jOrgChart( {
                 chartElement : '#jOrgChart',
                 dragAndDrop : false
             });
           },"JSON")
       }else if(leng == 1){

        }else{

        }
     }
 </script>

参考：https://www.cnblogs.com/liboxncg/p/6249752.html

json数据：

 {
   "data": [{
     "id": 1,
     "name": "企业主体信用得分",
     "pid": null,
     "childrens": [
       {
         "id": 2,
         "name": "企业素质",
         "pid": 1,
         "childrens": [
           {
             "id": 5,
             "name": "基本信息",
             "pid": 2,
             "childrens": [
               {
                 "id": 10,
                 "name": "企业主体信息识别",
                 "pid": 5,
                 "childrens": [
                 ]
               },
               {
                 "id": 11,
                 "name": "企业持续注册时间",
                 "pid": 5,
                 "childrens": [
                 ]
               },
               {
                 "id": 12,
                 "name": "注册资本",
                 "pid": 5,
                 "childrens": [
                 ]
               }
             ]
           },
           {
             "id": 6,
             "name": "管理认证",
             "pid": 2,
             "childrens": [
               {
                 "id": 13,
                 "name": "国际性管理认证",
                 "pid": 6,
                 "childrens": [
                 ]
               }
             ]
           }
         ]
       },
       {
         "id": 3,
         "name": "履约记录",
         "pid": 1,
         "childrens": [
           {
             "id": 7,
             "name": "税务执行情况",
             "pid": 3,
             "childrens": [
               {
                 "id": 14,
                 "name": "是否按时缴纳税款",
                 "pid": 7,
                 "childrens": [
                 ]
               }
             ]
           },
           {
             "id": 8,
             "name": "网贷情况",
             "pid": 3,
             "childrens": [
               {
                 "id": 15,
                 "name": "网贷逾期",
                 "pid": 8,
                 "childrens": [
                 ]
               }
             ]
           }
         ]
       },
       {
         "id": 4,
         "name": "公共监督",
         "pid": 1,
         "childrens": [
           {
             "id": 9,
             "name": "行政处罚",
             "pid": 4,
             "childrens": [
               {
                 "id": 16,
                 "name": "处罚信息",
                 "pid": 9,
                 "childrens": [
                 ]
               }
             ]
           }
         ]
       }
     ]
   }
 ]
 }

<script type='text/javascript'>
    $(function(){
        //数据返回
        $.ajax({
            url: "test.json",
            type: 'GET',
            dataType: 'JSON',
            data: {action: 'org_select'},
            success: function(result){
                var showlist = $("<ul id='org' style='display:none'></ul>");
                showall(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.childrens.length > 0){

                var li = $("<li></li>");
                li.append("<a href='javascript:void(0)' onclick=getOrgId("+val.id+");>"+val.name+"</a>").append("<ul></ul>").appendTo(parent);
                //递归显示
                showall(val.childrens, $(li).children().eq(1));
            }else{
                $("<li></li>").append("<a href='javascript:void(0)' onclick=getOrgId("+val.id+");>"+val.name+"</a>").appendTo(parent);
            }
        });

    }

</script>