Question

我想动态构建层次结构，每个节点在层次结构中创建为具有自己的节点数组的层/层。这应该形成一个树结构。应该有一个根节点，以及一个未定义数量的节点和级别来构成层次结构大小。除了根节点之外，什么都不应该修复。我不需要读取或搜索层次结构，我需要构建它。数组应该开始{＆＃34; name＆＃34; ：＆＃34; A＆＃34;，＆＃34;孩子＆＃34; ：[]}并且每个新节点都会被创建{＆＃34; name＆＃34; ：＆＃34; A＆＃34;，＆＃34;孩子＆＃34; ：[HERE - {＆＃34; name＆＃34; ：＆＃34; A＆＃34;，＆＃34;孩子＆＃34; ：[]}]}。在子阵列中，越走越深。基本上，在调用之前，数组应该没有值，除了根节点。在函数调用之后，数组应包含一个数字所需的节点，这些节点可能随每次调用而变化，具体取决于数据库查询的结果。每个子数组都包含一个或多个节点值。应该至少有2个节点级别，包括root。它最初应该是一个空白画布，它不是预定义的数组值。

Answer 1

因此，您的节点具有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/。

Answer 2

    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”， “孩子们”：[] }] } }，{ “名字”：“B2”， “孩子们”：[{ “名字”：“C2”， “孩子们”：[] }] }] }

动态Javascript树结构

2 个答案: