平时会经常遇到树形结构的问题,比如显示目录结构等。
大多数情况下后台会返回这样的数据,如下:
这种数据结构后台容易处理,但是前台不好处理,需要首先将其转成树形json数据,如下:
这样就可以很方便的是用递归构建树形的组件。
一、将list数组结构的数据转成tree结构json
二、根据tree结构json数据生成下拉框
添加下拉框容器
//js脚本,递归生成
//获取容器对象
var selectBox=document.getElementById("selectBox");
//生成树下拉菜单
var j="-";//前缀符号,用于显示父子关系,这里可以使用其它符号
function creatSelectTree(d){
var option="";
for(var i=0;i<d.length;i++){
if(d[i].children.length){//如果有子集
option+="";
j+="-";//前缀符号加一个符号
option+=creatSelectTree(d[i].children);//递归调用子集
j=j.slice(0,j.length-1);//每次递归结束返回上级时,前缀符号需要减一个符号
}else{//没有子集直接显示
option+="";
}
}
return option;//返回最终html结果
}
//调用函数,并将结构出入到下拉框容器中
selectBox.innerHTML=creatSelectTree(tree);