動態JavaScript樹結構

Question

我想動態地建立層次結構，每個節點創建爲層次結構中的一個層/層次，並具有自己的節點數組。這應該形成一個樹結構。應該有一個根節點和一個未定義數量的節點和級別來組成層級大小。除了根節點之外，什麼都不應該被修復。我不需要閱讀或搜索層次結構，我需要構建它。 該數組應該從{「name」：「A」，「children」：[]}開始，並且每個新節點都將創建級別{「name」：「A」，「children」：[HERE - {「name」 ：「A」，「children」：[]}]}。在兒童陣列中，越來越深入。基本上，數組在調用之前應該沒有值，除了根節點。在函數調用之後，數組應該包含一個數字所需的節點，這個數字可能隨着每次調用而變化，這取決於數據庫查詢的結果。每個子數組將包含一個或多個節點值。應該有至少2個節點級別，包括根。 它最初應該是一個空白畫布，即沒有預定義的數組值。

Answer 1

function Tree(name,child){ 
     this.name = name; 
     this.children = child || []; 
     this.addNode = function (parent){ 
      this.children = parent; 
     } 
     this.addChild = function (parentName){ 
      this.children.push(new Tree(parentName)); 
     } 
    } 

    var tree = new Tree("A"); // create a tree (or a portion of a tree) with root "A" and empty children 
    tree.addChild("B1"); // A -> B1 
    tree.addChild("B2"); // A -> B2 
    var subTree1 = new Tree("C1"); // create a sub tree 
    subTree1.addChild("D1"); // C1 -> D1 
    subTree1.addChild("D2"); // C1 -> D2 
    tree.children[0].addNode(subTree1); // add this sub tree under A->B1 
    // Tree now is: A--> B1 
    //      C1 
    //      D1 
    //      D2 
    //     B2 
    tree.children[1].addChild("C2"); 
    // Tree now is: A--> B1 
    //      C1 
    //      D1 
    //      D2 
    //     B2 
    //      C2 
    //tree.children[0].addChild("C4"); 
    // Tree now is: A--> B1 
    //      C1 
    //      D1 
    //      D2 
    //      C4 
    //     B2 
    //      C2  
    console.log(JSON.stringify(tree)); 

{ 「名稱」： 「A」， 「孩子」：[{ 「名稱」： 「B1」， 「孩子」：{ 「名稱」： 「C1」， 「兒「：[{ 」名稱「： 」D1「， 」孩子「：[] }，{ 」名稱「： 」D2「， 」孩子「：[] }] } }，{ 「name」：「B2」， 「children」：[{「」name「：」 C2" ， 「孩子」：[] }]} ] }

Answer 2

所以你的節點有一個name:屬性和一個children:數組屬性。

數據庫通常在表存儲樹木

node-id, parent-id, value1, ..., valueN 

（你可以得到一定的優勢，如果你存儲深度優先訪問順序和深度優先退貨訂單;問意見，如果你需要的細節）。

如果你做一個查詢並得到這個數據到JSON，你將有類似的信息（您說明），

[{id: "0", parent: "-1", name: "A2"}, {id: "1", parent: "0", name: "A3"}, 
{id: "2", parent: "1", name: "A31"}, {id: "3", parent: "2", name: "A311"}, 
{id: "4", parent: "2", name: "A312"}] 

可以將此轉化爲{name: children:}格式與下面的代碼：

// data is an array in the above format 
function toTree(data) { 
    var childrenById = {}; // of the form id: [child-ids] 
    var nodes = {};  // of the form id: {name: children: } 
    var i, row; 
    // first pass: build child arrays and initial node array 
    for (i=0; i<data.length; i++) { 
     row = data[i]; 
     nodes[row.id] = {name: row.name, children: []}; 
     if (row.parent == -1) { // assume -1 is used to mark the root's "parent" 
      root = row.id; 
     } else if (childrenById[row.parent] === undefined) { 
      childrenById[row.parent] = [row.id]; 
     } else { 
      childrenById[row.parent].push(row.id); 
     } 
    } 
    // second pass: build tree, using the awesome power of recursion! 
    function expand(id) { 
     if (childrenById[id] !== undefined) { 
      for (var i=0; i < childrenById[id].length; i ++) { 
       var childId = childrenById[id][i]; 
       nodes[id].children.push(expand(childId)); 
      } 
     } 
     return nodes[id]; 
    } 
    return expand(root); 
} 

查看http://jsfiddle.net/z6GPB/的工作示例。