引进文件：
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 onclick='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 onclick='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)' 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>