动态Javascript树结构 [英] Dynamic Javascript Tree Structure

问题描述

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

I would like to build the hierarchy dynamically with each node created as a layer/level in the hierarchy having its own array of nodes. THIS SHOULD FORM A TREE STRUCTURE.There should be a root node, and an undefined number of nodes and levels to make up the hierarchy size. Nothing should be fixed besides the root node. I do not need to read or search the hierarchy, I need to construct it. The array should start {"name" : "A", "children" : []} and every new node as levels would be created {"name" : "A", "children" : [HERE-{"name" : "A", "children" : []}]}. In the child array, going deeper and deeper. Basically the array should have no values before the call, except maybe the root node. After the function call, the array should comprise of the required nodes of a number that may vary with every call depending on the results of a database query. Every child array will contain one or more node values. There should be a minimum of 2 node levels, including the root. It should initially be a Blank canvas, that is no predefined array values.

推荐答案

    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));

{
name：A，
children： [{
name：B1，
children：{
name：C1，
children：[{
名称：D1，
children：[]
}，{
name：D2，
children：[]
}
}
}，{
name：B2，
children：[{
name：C2，
儿童：[]
}]
}]
}

{ "name": "A", "children": [{ "name": "B1", "children": { "name": "C1", "children": [{ "name": "D1", "children": [] }, { "name": "D2", "children": [] }] } }, { "name": "B2", "children": [{ "name": "C2", "children": [] }] }] }

这篇关于动态Javascript树结构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！