I often encounter problems with tree structures, such as displaying directory structures.
In most cases, the background will return such data, as follows:
[{ 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: 'web design' },]This data structure is easy to process in the background, but the front desk is difficult to process. You need to convert it into tree json data first, as follows:
[{ 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',children:[{ id: 63, pid: 61, name: 'web design' }]},]This makes it very convenient to use recursively to build tree-shaped components.
It is best if the background can directly return this structure, otherwise the front desk needs to do a conversion.
1. Convert the data of the list array structure into a tree structure json
//list to tree jsonfunction listToTree(list,pid) {var ret = [];//A temporary array for(var i in list) {if(list[i].pid == pid) {//If the parent id of the current item is equal to the parent id to be searched, recursively list[i].children = listToTree(list, list[i].id); ret.push(list[i]);//Save the current item in the temporary array}} return ret;//Return the result after recursion is over}var tree=listToTree(list,0);//Call the function, pass in the list array to be converted, and the pidconsole.log(tree);2. Generate drop-down boxes based on tree structure json data
//Add drop-down box container in the web page <select id="selectbox" name=""></select>//js script, recursively generate//Get container object var selectbox=document.getElementById("selectbox");//Spanning tree drop-down menu var j="-";//Prefix symbols are used to display parent-child relationships. Other symbols can be used here function createSelectTree(d){ var option=""; for(var i=0;i<d.length;i++){ if(d[i].children.length){//If there is a subset option+="<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>"; } } return option;//Return the final html result}//Calling the function and entering and exiting the structure into the drop-down box container selectbox.innerHTML=creatSelectTree(tree);If you still want to learn in depth, you can click on the jquery drop-down box effect summary and the JavaScript drop-down box effect summary to learn.
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.