顯示節點樹

Question

可能重複：
Javascript library for node-based objects and object relationships?

是否有任何的jQuery插件，或任何解決方案，用於顯示節點關係的表（一個節點都有一個家長和許多兒童）給出了這個數據的表格？

Answer 1

您希望以何種方式顯示它們？

下面是一些插件的列表：http://www.webdesignbooth.com/15-great-jquery-plugins-for-better-table-manipulation/

我可以告訴你這一點，你可以修改，以滿足您的需求。它正在做的是通過對象圖遞歸。請注意，通過編輯function newDiv代碼可以更改設置的樣式。

(function() { 
    var jsonData = dataSentFromServer(); 
    var detailsElement = document.getElementById("Details"); 
    function newDiv(txt) { 
     var createDiv = document.createElement("div"); 
     if (txt != undefined) 
      createDiv.innerHTML = txt; 
     return createDiv; 
    } 

    var depth = 1; 
    (function ComposeGraph(obj, el) { 
     var ElementArray = []; 
     var ChildArray = []; 
     $.each(obj, function (name, value) { 
      if (!$.isArray(value)) { 

       var appender = newDiv(name + " __:__ " + value); 
       appender.setAttribute("style", "margin-left:" + 10 * depth + "px;"); 
       if ($.isPlainObject(value)) { 
        appender.innerHTML = "<b>" + appender.innerHTML + "</b>"; 
        depth++; 
        ComposeGraph(value, appender); 
        depth--; 
        ElementArray.push(el); 
        ChildArray.push(appender); 
       } else { 
        el.appendChild(appender); 
       } 
      } else { 
       var appender = newDiv(name + " __:__ " + value); 
       appender.setAttribute("style", "margin-left:" + 10 * depth + "px;"); 
       appender.innerHTML = "<b>" + appender.innerHTML + "</b>"; 
       for (var i = 0, len = value.length; i < len; i++) { 
        depth++; 
        ComposeGraph(value[i], appender); 
        depth--; 
       } 
       ElementArray.push(el); 
       ChildArray.push(appender); 
      } 
     }); 
     for (var i = 0, len = ElementArray.length; i < len; i++) { 
      ElementArray[i].appendChild(ChildArray[i]); 
     } 
    })(jsonData, detailsElement); 
})();