jquery - ノード ツリーの表示

Question

重複の可能性:
ノードベースのオブジェクトとオブジェクト関係の Javascript ライブラリ?

このデータのテーブルを指定して、ノード関係のテーブル (ノードには 1 つの親と多くの子があります) を表示するための 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);
 })();