A menudo encuentro problemas con las estructuras de los árboles, como mostrar estructuras de directorio.
En la mayoría de los casos, el fondo devolverá dichos datos, como sigue:
[{ 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, nombre: 'diseño web'},]Esta estructura de datos es fácil de procesar en segundo plano, pero la recepción es difícil de procesar. Primero debe convertirlo en datos de árbol JSON, como sigue:
[{id: 19, pid: 0, nombre: 'nodejs', niños: [{id: 20, pid: 19, nombre: 'expreso', niños: [{id: 60, pid: 20, nombre: 'eJS'}]}, {id: 21, pid: 19, nombre: 'mongoDB'}]}, {id: 59, pid: 0, nombre: ' { 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 diseño ', niños: [{id: 63, pid: 61, nombre:' diseño web '}]},]Esto hace que sea muy conveniente usar recursivamente para construir componentes en forma de árbol.
Es mejor si el fondo puede devolver directamente esta estructura, de lo contrario, la recepción debe hacer una conversión.
1. Convierta los datos de la estructura de la matriz de listas en una estructura de árbol JSON
// Listar a Tree jsonfunction listToTree (list, pid) {var ret = []; // una matriz temporal para (var i en lista) {if (list [i] .pid == pid) {// si la identificación principal del elemento actual es igual al ident de la identificación principal, lista recursivamente [i] .children = listtotree (list, list [i] .id); ret.push (list [i]); // Guarde el elemento actual en la matriz temporal}} return ret; // devuelve el resultado después de que la recursión haya terminado} var tree = listTotree (list, 0); // llame a la función, pase en la matriz de lista para convertirse, y el pidconsole.log (árbol);2. Genere cuadros desplegables basados en datos de la estructura del árbol JSON
// Agregar contenedor de cuadro desplegable en la página web <select id = "selectbox" name = ""> </select> // js script, generar recursivamente // obtener objeto de contenedor var selectbox = document.getElementByid ("selectbox"); // El menú desplegable del árbol de abarcado Var J = "-"; // Los símbolos de los prefijos se utilizan para mostrar las relaciones matrad-Child. Se pueden usar otros símbolos aquí Function CreateSElecttree (D) {var option = ""; for (var i = 0; i <d.length; i ++) {if (d [i] .children.length) {// Si hay una opción de subconjunto+= "<opción valor = '"+d [i] .id+"'>"+j+d [i] .name+"</option>"; j+= "-"; // Agregue un símbolo de la opción de símbolo de prefijo+= createSelecttree (d [i] .children); // recursivamente llame al subconjunto j = j.slice (0, j.length-1); // Cada vez que el final recursivo se devuelve al superior, el símbolo de prefix debe ser subtractado por un símbolo} más} más {/sin subspeta de la opción+= "La opción de la opción <opción <óptima < valor = '"+d [i] .id+"'> "+j+d [i] .name+" </option> "; }} opción de retorno; // Devuelve el resultado HTML final} // llamando a la función e ingresando y saliendo de la estructura en el contenedor de cuadro desplegable selectbox.innerhtml = createSelecttree (árbol);Si aún desea aprender en profundidad, puede hacer clic en el resumen del efecto del cuadro desplegable JQuery y el resumen del efecto de la casilla desplegable JavaScript para aprender.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.