快捷導(dǎo)航

基于JavaScript實(shí)現(xiàn)樹(shù)形下拉框

更新時(shí)間：2016年08月10日 10:28:24 投稿：lijiao

這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)樹(shù)形下拉框的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

平時(shí)會(huì)經(jīng)常遇到樹(shù)形結(jié)構(gòu)的問(wèn)題，比如顯示目錄結(jié)構(gòu)等。

大多數(shù)情況下后臺(tái)會(huì)返回這樣的數(shù)據(jù)，如下：

[
{ 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: '前端開(kāi)發(fā)' },
{ 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: '視覺(jué)設(shè)計(jì)' },
{ id: 63, pid: 61, name: '網(wǎng)頁(yè)設(shè)計(jì)' },
]

這種數(shù)據(jù)結(jié)構(gòu)后臺(tái)容易處理，但是前臺(tái)不好處理，需要首先將其轉(zhuǎn)成樹(shù)形json數(shù)據(jù)，如下：

[
{ 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: '前端開(kāi)發(fā)',
 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: '視覺(jué)設(shè)計(jì)',children:[{ id: 63, pid: 61, name: '網(wǎng)頁(yè)設(shè)計(jì)' }]},
]

這樣就可以很方便的是用遞歸構(gòu)建樹(shù)形的組件。

如果后臺(tái)能夠直接返回這種結(jié)構(gòu)最好，不然前臺(tái)需要做轉(zhuǎn)換。

一、將list數(shù)組結(jié)構(gòu)的數(shù)據(jù)轉(zhuǎn)成tree結(jié)構(gòu)json

//list 轉(zhuǎn)成樹(shù)形json
function listToTree(list,pid) {
var ret = [];//一個(gè)存放結(jié)果的臨時(shí)數(shù)組
for(var i in list) {
if(list[i].pid == pid) {//如果當(dāng)前項(xiàng)的父id等于要查找的父id，進(jìn)行遞歸
 list[i].children = listToTree(list, list[i].id);
 ret.push(list[i]);//把當(dāng)前項(xiàng)保存到臨時(shí)數(shù)組中
}
}
return ret;//遞歸結(jié)束后返回結(jié)果
}

var tree=listToTree(list,0);//調(diào)用函數(shù)，傳入要轉(zhuǎn)換的list數(shù)組，和樹(shù)中頂級(jí)元素的pid

console.log(tree);

二、根據(jù)tree結(jié)構(gòu)json數(shù)據(jù)生成下拉框

//在網(wǎng)頁(yè)中添加下拉框容器
<select id="selectbox" name=""></select>
//js腳本，遞歸生成
//獲取容器對(duì)象
var selectbox=document.getElementById("selectbox");

//生成樹(shù)下拉菜單
var j="-";//前綴符號(hào)，用于顯示父子關(guān)系，這里可以使用其它符號(hào)
function creatSelectTree(d){
 var option="";
 for(var i=0;i<d.length;i++){
 if(d[i].children.length){//如果有子集
  option+="<option value='"+d[i].id+"'>"+j+d[i].name+"</option>";
 j+="-";//前綴符號(hào)加一個(gè)符號(hào)
  option+=creatSelectTree(d[i].children);//遞歸調(diào)用子集
 j=j.slice(0,j.length-1);//每次遞歸結(jié)束返回上級(jí)時(shí)，前綴符號(hào)需要減一個(gè)符號(hào)
  }else{//沒(méi)有子集直接顯示
  option+="<option value='"+d[i].id+"'>"+j+d[i].name+"</option>";
  }
  }
 return option;//返回最終html結(jié)果
 }

//調(diào)用函數(shù)，并將結(jié)構(gòu)出入到下拉框容器中
selectbox.innerHTML=creatSelectTree(tree);

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊jquery下拉框效果匯總、JavaScript下拉框效果匯總進(jìn)行學(xué)習(xí)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: