jOrgChart二叉树效果

引进文件：

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

 

HTML：

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

 

js：

 1 //自己项目(动态添加，逐条添加)
 2 <script type="text/javascript">
 3 $(function(){
 4   Getjiedian();
 5 })
 6 var arr = [];
 7 function Getjiedian(){
 8   $.get(location.href,function(data){
 9       var showlist = $("<ul id='org' style='display:none'></ul>");
10       arr.push(data.info);
11       showall(arr, showlist);
12       $("#jOrgChart").append(showlist);
13       $("#org").jOrgChart( {
14           chartElement : '#jOrgChart',//指定在某个dom生成jorgchart
15           dragAndDrop : false //设置是否可拖动
16       });
17   },"JSON")
18 }
19   function showall(infos, parent) {
20       $.each(infos, function(e,val) {
21           var li = $("<li class='li_id"+ val.id +"'></li>");
22            var str = "";
23               str +=       '<div class="tree" data-index="'+e+'" data-id='+val.id+'>';
24               str +=            '<div class="useImg">';
25               str +=               '<img class="middleY" src="'+val.headimgurl+'" alt="">';
26               str +=           '</div>';
27               str +=           '<p class="useName">'+val.nickname+'</p>';
28               str +=           '<p class="useNum">已审核:'+ val.num +'人</p>';
29               str +=        '</div>';
30            li.append("<div οnclick='GetElse("+ val.id +")'>"+str+"</div>").append("<ul></ul>").appendTo(parent);
31           showall(val.list,$(li).children().eq(1));
32       });
33     }
34 
35     function GetElse(id){
36       var leng = $(".li_id" + id).children().eq(1).children().length;
37       if(leng == 0){
38           var vals  = $(".li_id" + id).children().eq(1);
39           var data ={
40             'id':id
41           }
42           $.get("{:U('UserWx/jiedianfind')}",data,function(res){
43           var info = res.list;
44             $.each(info, function(e,val) {
45                 var li = $("<li class='li_id"+ val.id +"'></li>");
46                  var str = "";
47                     str +=       '<div class="tree" data-index="'+e+'"  data-id='+val.id+'>';
48                     str +=            '<div class="useImg">';
49                     str +=               '<img class="middleY" src="'+val.headimgurl+'" alt="">';
50                     str +=           '</div>';
51                     str +=           '<p class="useName">'+val.nickname+"  "+' </p>';
52                     str +=           '<p class="useNum">已审核:'+ val.num +'人</p>';
53                     str +=        '</div>';
54                  li.append("<div οnclick='GetElse("+ val.id +")';>"+str+"</div>").append("<ul></ul>").appendTo(vals);
55            })
　　　　　　　　//重置显示容器
56             var htmls = $("#org");
57             $("#jOrgChart").html("");
58             $("#jOrgChart").append(htmls);
59             $("#org").jOrgChart( {
60                 chartElement : '#jOrgChart',
61                 dragAndDrop : false 
62             });
63           },"JSON")
64       }else if(leng == 1){
65           
66        }else{
67 
68        }
69     }
70 </script>

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

json数据：

  1 {
  2   "data": [{
  3     "id": 1,
  4     "name": "企业主体信用得分",
  5     "pid": null,
  6     "childrens": [
  7       {
  8         "id": 2,
  9         "name": "企业素质",
 10         "pid": 1,
 11         "childrens": [
 12           {
 13             "id": 5,
 14             "name": "基本信息",
 15             "pid": 2,
 16             "childrens": [
 17               {
 18                 "id": 10,
 19                 "name": "企业主体信息识别",
 20                 "pid": 5,
 21                 "childrens": [
 22                 ]
 23               },
 24               {
 25                 "id": 11,
 26                 "name": "企业持续注册时间",
 27                 "pid": 5,
 28                 "childrens": [
 29                 ]
 30               },
 31               {
 32                 "id": 12,
 33                 "name": "注册资本",
 34                 "pid": 5,
 35                 "childrens": [
 36                 ]
 37               }
 38             ]
 39           },
 40           {
 41             "id": 6,
 42             "name": "管理认证",
 43             "pid": 2,
 44             "childrens": [
 45               {
 46                 "id": 13,
 47                 "name": "国际性管理认证",
 48                 "pid": 6,
 49                 "childrens": [
 50                 ]
 51               }
 52             ]
 53           }
 54         ]
 55       },
 56       {
 57         "id": 3,
 58         "name": "履约记录",
 59         "pid": 1,
 60         "childrens": [
 61           {
 62             "id": 7,
 63             "name": "税务执行情况",
 64             "pid": 3,
 65             "childrens": [
 66               {
 67                 "id": 14,
 68                 "name": "是否按时缴纳税款",
 69                 "pid": 7,
 70                 "childrens": [
 71                 ]
 72               }
 73             ]
 74           },
 75           {
 76             "id": 8,
 77             "name": "网贷情况",
 78             "pid": 3,
 79             "childrens": [
 80               {
 81                 "id": 15,
 82                 "name": "网贷逾期",
 83                 "pid": 8,
 84                 "childrens": [
 85                 ]
 86               }
 87             ]
 88           }
 89         ]
 90       },
 91       {
 92         "id": 4,
 93         "name": "公共监督",
 94         "pid": 1,
 95         "childrens": [
 96           {
 97             "id": 9,
 98             "name": "行政处罚",
 99             "pid": 4,
100             "childrens": [
101               {
102                 "id": 16,
103                 "name": "处罚信息",
104                 "pid": 9,
105                 "childrens": [
106                 ]
107               }
108             ]
109           }
110         ]
111       }
112     ]
113   }
114 ]
115 }

 

<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)' οnclick=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)' οnclick=getOrgId("+val.id+");>"+val.name+"</a>").appendTo(parent);
            }
        });

    }

</script>

 

转载于:https://www.cnblogs.com/hermitks/p/9806333.html