Ich stoße oft auf Probleme mit Baumstrukturen, wie z. B. das Anzeigen von Verzeichnisstrukturen.
In den meisten Fällen gibt der Hintergrund solche Daten wie folgt zurück:
[{ id: 19, pid: 0, name: 'nodejs' },{ id: 20, pid: 19, name: 'express' },{ id: 21, pid: 19, name: 'mongodb' },{ id: 60, pid: 20, name: 'ejs' },{ id: 59, pid: 0, name: 'front-end development' },{ id: 70, pid: 59, name: 'javascript' },{ id: 71, pid: 59, name: 'css' },{ id: 72, pid: 59, name: 'html' },{ id: 73, pid: 59, name: 'bootstrap' },{ id: 61, pid: 0, name: 'visual design' },{ id: 63, pid: 61, Name: 'Webdesign'},]Diese Datenstruktur ist im Hintergrund leicht zu verarbeiten, aber die Rezeption ist schwer zu verarbeiten. Sie müssen es zuerst in Baum -JSON -Daten umwandeln, wie folgt:
[{ id: 19, pid: 0, name: 'nodejs', children:[ { id: 20, pid: 19, name: 'express',children:[{ id: 60, pid: 20, name: 'ejs' }]}, { id: 21, pid: 19, name: 'mongodb' } ]}, { id: 59, pid: 0, name: 'front-end development', children:[ { id: 70, pid: 59, name: 'javascript' }, { id: 71, pid: 59, name: 'css' }, { id: 72, pid: 59, name: 'html' }, { id: 73, pid: 59, name: 'bootstrap' } ]},{ id: 61, pid: 0, name: 'visual Design ', Kinder: [{ID: 63, PID: 61, Name:' Web Design '}]},]Dies macht es sehr bequem, rekursiv zu verwenden, um baumförmige Komponenten zu bauen.
Es ist am besten, wenn der Hintergrund diese Struktur direkt zurückgeben kann, andernfalls muss die Rezeption eine Konvertierung durchführen.
1. Konvertieren Sie die Daten der List -Array -Struktur in eine Baumstruktur JSON
// List to tree JsonFunction ListTotree (Liste, PID) {var ret = []; // Ein temporäres Array für (var i in list) {if (list [i] .pid == PID) {// Wenn die übergeordnete ID des aktuellen Elements gleich der übergeordneten ID -ID -Liste ist. ret.push (Liste [i]); // Speichern Sie das aktuelle Element im temporären Array}} reta ret; // das Ergebnis zurückgeben, nachdem die Rekursion über} var tree = listToTree (Liste, 0); // die Funktion aufrufen, im Listenarray übergeben werden soll, und der PidConsole.log (Tree);2. Generieren Sie Dropdown-Boxen basierend auf der Baumstruktur JSON-Daten
// Dropdown-Box Container in der Webseite <id = "selectBox" name = ""> </select> // js Skript, rekursiv generieren // Containerobjekt var selectBox = document.getElementById ("selekteBox"); // Spanning Tree-Baummenü var j = "-"; // Präfix-Symbole werden verwendet, um Eltern-Child-Beziehungen anzuzeigen. Andere Symbole können hier verwendet werden. Funktion createSelectTree (d) {var option = ""; für (var i = 0; i <d.Length; i ++) {if (d [i] .Children.length) {// Wenn es eine Subsetoption gibt+= "<Option Value = '"+d [i] .id+"'>"+j+d [i] .Name+"</option>"; j+="-";//Add a symbol of the prefix symbol option+=creatSelectTree(d[i].children);//Recursively call subset j=j.slice(0,j.length-1);//Every time the recursive end returns to the superior, the prefix symbol needs to be subtracted by one symbol}else{//No subset directly display option+="<option value = '"+d [i] .id+"'> "+j+d [i] .name+" </option> "; }} Rückgabeoption; // Rückgabe des endgültigen HTML-Ergebniss} // Die Funktion aufrufen und die Struktur in den Dropdown-Box-Container-Selectbox.InnerHtml = CreateSelectTree (Tree) aufrufen;Wenn Sie weiterhin ausführlich lernen möchten, können Sie auf die Zusammenfassung des Jquery-Dropdown-Felds und die Zusammenfassung der Drop-Drop-Box-Auswirkungen von JavaScript klicken, um zu lernen.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.