Dynamischer Javascript Baum-Struktur

Ich würde gerne die Hierarchie aufbauen, die dynamisch mit jedem Knoten erstellt, als eine Schicht/Ebene in der Hierarchie haben Ihre eigene Reihe von Knoten. DIES SOLLTE IN FORM EINER BAUMSTRUKTUR.Es sollte ein root-Knoten, und eine Undefinierte Anzahl der Knoten und Ebenen hat, um die Hierarchie Größe. Nichts sollte behoben werden, neben den root-Knoten. Ich brauche nicht zu Lesen, oder suchen Sie die Hierarchie, die ich brauche, um es zu konstruieren.
Sollte das array starten, {"name" : "A", "children" : []} und jedem neuen Knoten als Ebenen erstellt, {"name" : "A", "children" : [HIER-{"name" : "A", "children" : []}]}. In das child-array, gehen tiefer und tiefer. Im Grunde sollte das array keine Werte vor dem Aufruf, außer vielleicht den root-Knoten. Nach dem Aufruf der Funktion das array umfassen sollte, von dem entsprechenden Knoten eine Zahl, die variieren bei jedem Aufruf in Abhängigkeit der Ergebnisse einer Datenbank-Abfrage. Jedes Kind array enthält einen oder mehrere node-Werte. Es sollte ein minimum von 2 Ebenen von Knoten einschließlich der Wurzel.
Es sollte zunächst eine Leere Leinwand, das ist keine vordefinierten array-Werte.

InformationsquelleAutor user1684586 | 2012-09-20
  1. 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));

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

    • Dies erfordert die Knoten Hinzugefügt werden, die in einer bestimmten Reihenfolge; wenn die SQL-Abfrage zurückgibt, Kinder vor Eltern, haben Sie, um die Reihenfolge der Knoten, bevor Sie Sie verwenden können addChild bauen ein JavaScript-Darstellung
    • sicher nicht. Man konnte von unten anfangen (oder anderen Ort). zum Beispiel: var unten = new Baum("D1"); var höher = new Baum("C1"); höhere.addNode(unten); .. aber noch nicht genau, was Sie brauchen
    • das ist so gut vielen Dank
    InformationsquelleAutor balafi
  2. 3

    So dass Ihre Knoten haben eine name: Eigenschaft und eine children: array-Eigenschaft.

    Datenbanken in der Regel speichern die Bäume in den Tabellen als

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

    (Sie erhalten bestimmte Vorteile, wenn Sie speichern, Tiefe-zuerst besuchen, um-und depth-first return Reihenfolge; Fragen Sie in den Kommentaren, wenn Sie die details).

    Wenn Sie eine einzige Abfrage und Sie erhalten die Daten in JSON, Sie haben so etwas wie (für die Grafik),

    [{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"}]

    Können Sie konvertieren, das in {name: children:} - format mit dem folgenden code:

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

    Sehen http://jsfiddle.net/z6GPB/ für ein Beispiel.

    • Kopiere ich deinen code an die Stelle von var treeData Abschnitt von meinem code? Wie Sie sehen können in meinem code, ich nenne die var treeData zur Darstellung der gesamten Struktur generiert.
    • Ok. Aber ich muss zur Aufrechterhaltung des name: Eigentum und Kinder: array-Eigenschaft des nodes, zu erreichen, die Baum-format. Nicht einer Tabelle format. Die Frage war, wie man erstellen Sie dieses format für die Knoten in einer dynamischen Art und Weise, in, dass es die Unterstützung jedes gegebene Anzahl von Knoten/Ebenen in der Hierarchie.
    • Wird Ihr code pflegen der Baum-format, das ich beschrieben hatte?
    • Ich gut aussieht, wenn ich die Konsole verwenden. Ich werde haben, zu integrieren, mit meinem code, zu wissen, wenn es Recht ist. BTW vielen Dank 🙂 Auch ist dein code erlauben, für eine Feste Anzahl von Knoten, wie beschrieben hab ich in meinem Beispiel der 4-Knoten-sets, oder hat die Schleife in Ihrem code können für eine Variante Menge der Knoten, die mit jeder Verarbeitung?
    • Vielen Dank. Es funktioniert Super. Alles was ich jetzt noch zu tun ist, verwenden Sie es mit mysql. 🙂
    InformationsquelleAutor tucuxi
Schreibe einen Kommentar