Costumo encontrar problemas com estruturas de árvores, como exibir estruturas de diretório.
Na maioria dos casos, o plano de fundo retornará esses dados, como segue:
[{ 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, nome: 'web design'},]Essa estrutura de dados é fácil de processar em segundo plano, mas é difícil processar a recepção. Você precisa convertê -lo em dados JSON da árvore primeiro, como segue:
[{ 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, nome: 'javascript'}, {id: 71, pid: 59, nome: 'css'}, {id: 72, pid: 59, name: 'Html'}, {id: 73, pid: 59, nome: 'bootstrap'}}}}}}, {id: 73, pid: 59, nome: 'bootstrap'}}}}}}, Design ', filhos: [{id: 63, pid: 61, nome:' web design '}]},]Isso torna muito conveniente usar recursivamente para construir componentes em forma de árvore.
É melhor se o plano de fundo puder retornar diretamente essa estrutura, caso contrário, a recepção precisará fazer uma conversão.
1. Converta os dados da estrutura da matriz em uma estrutura de árvore JSON
Liste // Lista de JSONFunction ListToTree (List, PID) {var ret = []; // Uma matriz temporária para (var i na lista) {if (list [i] .pid == PID) {// se o ID do pai do pai é igual ao ID do pai a ser pesquisado, listado [i]. ret.push (list [i]); // salve o item atual na matriz temporária}} retornar ret; // retornar o resultado após a recursão acabar} var árvore = listToTree (list, 0); // Chame a função, passe na matriz de lista a ser convertida e o pidconsole.log (árvore);2. Gere caixas suspensas com base na estrutura de árvores JSON Data
// Adicione o contêiner da caixa suspensa na página da web <SELECT ID = "SelectBox" name = ""> </select> // script JS, gerar recursivamente // Obter objeto de contêiner var selectBox = document.getElementById ("SelectBox"); // Spanning Tree Drop-Down Menu var J = "-"; Outros símbolos podem ser usados aqui a função CreateSelectTree (d) {var option = ""; para (var i = 0; i <d.Length; i ++) {if (d [i] .children.length) {// se houver uma opção de subconjunto+= "<opção 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+" </pption> "; }} Retornar opção; // retornar o resultado final HTML} // chamando a função e inserindo e saindo da estrutura no contêiner suspenso da caixa selectBox.innerhtml = CreateSelectTree (árvore);Se você ainda deseja aprender em profundidade, clique no resumo do efeito de caixa suspensa do jQuery e no resumo do efeito suspenso JavaScript para aprender.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.