Je rencontre souvent des problèmes avec les structures des arbres, telles que l'affichage des structures de répertoires.
Dans la plupart des cas, le contexte renvoie ces données, comme suit:
[{id: 19, pid: 0, nom: 'nodejs'}, {id: 20, pid: 19, nom: 'express'}, {id: 21, pid: 19, nom: 'mongodb'}, {id: 60, pid: 20, nom: 'ejs'}, {id: 59, pid: 0, nom: 'Front-end'}, {id: 5, pid: 0, nom: ' 59, nom: 'javascript'}, {id: 71, pid: 59, nom: 'css'}, {id: 72, pid: 59, nom: 'html'}, {id: 73, pid: 59, nom: 'bootstrap'}, {id: 61, pid: 0, nom: 'Design visuel'}, {id: 61, pid: 0, nom: 'Visual Design'}, {id: 61, pid: 0, name: ' 61, nom: 'Web Design'},]Cette structure de données est facile à traiter en arrière-plan, mais la réception est difficile à traiter. Vous devez d'abord le convertir en données d'arbre JSON, comme suit:
[{id: 19, pid: 0, nom: 'nodejs', enfants: [{id: 20, pid: 19, nom: 'express', enfants: [{id: 60, pid: 20, nom: 'ejs'}]}, {id: 21, pid: 19, nom: 'mongodb'},}, {id: 59, pid: 0, nue: 'Front-end. {id: 70, pid: 59, nom: 'JavaScript'}, {id: 71, pid: 59, nom: 'css'}, {id: 72, pid: 59, nom: 'html'}, {id: 73, pid: 59, nom: 'boootsstrap'}]}, {} Design ', enfants: [{id: 63, pid: 61, nom:' Web Design '}]},]Cela le rend très pratique d'utiliser récursivement pour construire des composants en forme d'arbres.
Il est préférable que l'arrière-plan puisse renvoyer directement cette structure, sinon la réception doit effectuer une conversion.
1. Convertir les données de la structure du tableau de liste en une structure d'arbre JSON
// liste à arbre jsonfunction listTotree (list, pid) {var ret = []; // un tableau temporaire pour (var i dans la liste) {if (list [i] .pid == pid) {// si l'ID parent de l'élément actuel est égal à l'ID parent à rechercher, list); id); ret.push (list [i]); // Enregistrer l'élément actuel dans le tableau temporaire}} return ret; // renvoie le résultat après la récursion est sur} var arbre = listTotree (list, 0); // appelle la fonction, passez dans le tableau de liste à convertir, et le pidconsole.log (arbre);2. Générer des boîtes déroulantes basées sur les données JSON de structure d'arbre
// Ajouter un conteneur de boîte déroulante dans la page Web <SELECT ID = "SELECTBOX" Name = ""> </ SELECT> // Script JS, générer récursivement // Get Container Object var SelectBox = Document.getElementById ("SelectBox"); // Spanning Tree-Child menu var j = "-"; // Les symboles préfixés sont utilisés pour afficher les relations parent-enfant. D'autres symboles peuvent être utilisés ici la fonction CreateSelectTree (D) {var option = ""; pour (var i = 0; i <d.length; i ++) {if (d [i] .children.length) {// s'il existe une option de sous-ensemble + = "<option value = '" + d [i] .id + "'>" + j + d [i] .name + "</ option>"; J + = "-"; // Ajouter un symbole de l'option de symbole de préfixe + = CreateSelectTree (d [i] .children); // appelle récursivement le sous-ensemble j = j.slice (0, j.Lengthn-1); // chaque fois que la fin récursive revient au Superior, le symbole de préfixe doit être directement soustraté par un symbole} d'autre {// Un sous-ensemble d'option + " valeur = '"+ d [i] .id +"'> "+ j + d [i] .name +" </ option> "; }} Option de retour; // Renvoie le résultat HTML final} // Appel de la fonction et entrant et sortant de la structure dans le conteneur de boîte déroulant selectBox.innerhtml = CreateSelectTree (arbre);Si vous souhaitez toujours apprendre en profondeur, vous pouvez cliquer sur le résumé de l'effet de boîte déroulant JQuery et le résumé de l'effet de la boîte déroulante JavaScript pour apprendre.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.