使用jquery制作可視化的組織結構

組織結構是做項目里面經常用到的，但是要做成可視化的效果比較少，多數使用樹結構來表示，但是對於客戶來說不是太直觀。可以用jOrgChart來實現。如下圖的效果，這樣就比較直觀。

1. 首先你要去下載jOrgChart，不懂就找度娘
2. jOrgChart的添加的方法是必須在頁面放置<ul><li>這樣元素進去后，頁面加載時候重新渲染。所以我們要使用異步把數據動態綁定上去然后讓.

           jQuery(document).ready(function () {
               loadtree();
           });
           //menu_list為json數據
           //parent為要組合成html的容器
   
           function showall(menu_list, parent) {
               for (var menu in menu_list) {
                   //如果有子節點，則遍歷該子節點
                   if (menu_list[menu].children.length > 0) {
                       //創建一個子節點li
                       var li = $("<li></li>");
                       //將li的文本設置好，並馬上添加一個空白的ul子節點，並且將這個li添加到父親節點中
                       $(li).append(" <a  href='javascript:void(0)'  onclick='xx(" + menu_list[menu].id + ");'>" + menu_list[menu].name + "</a>").append("<ul></ul>").appendTo(parent);
                       //將空白的ul作為下一個遞歸遍歷的父親節點傳入
                       showall(menu_list[menu].children, $(li).children().eq(1));
                   }
                       //如果該節點沒有子節點，則直接將該節點li以及文本創建好直接添加到父親節點中
                   else {
                       $("<li></li>").append(" <a href='javascript:void(0)' onclick='xx(" + menu_list[menu].id + ");'>" + menu_list[menu].name + "</a>").appendTo(parent);
                   }
               }
           }
   
           function loadtree() {
               $.ajax({
                   url: '../Organization/GetList',
   
                   type: 'POST',
   
                   //data: { id: nodeId },
   
                   cache: false,
   
                   error: function () { alert('Error loading PHP document'); },
   
                   success: function (result) {
                       // var json = eval("["+result+"]");//這里中間的括號為中括號 使數據類似[{"username":"張三","content":"沙發"}];的格式
   
   
                       var showlist = $("<ul id='org' style='display:none'></ul>");
                       showall(result, showlist);
                       $("#f").append(showlist);
                       $("#org").jOrgChart();
                   }
               });
   
           }

    

3. 這是我數據結構，對應上面方法的遞歸動態寫進一個div中，簡單方便哈哈！

    

4.