欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2016年08月10日 10:28:24   投稿:lijiao  
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)樹形下拉框的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

平時(shí)會(huì)經(jīng)常遇到樹形結(jié)構(gòu)的問題,比如顯示目錄結(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: '前端開發(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: '視覺設(shè)計(jì)' },
{ id: 63, pid: 61, name: '網(wǎng)頁(yè)設(shè)計(jì)' },
]

這種數(shù)據(jù)結(jié)構(gòu)后臺(tái)容易處理,但是前臺(tái)不好處理,需要首先將其轉(zhuǎn)成樹形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: '前端開發(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: '視覺設(shè)計(jì)',children:[{ id: 63, pid: 61, name: '網(wǎng)頁(yè)設(shè)計(jì)' }]},
]

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

如果后臺(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)成樹形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ù)組,和樹中頂級(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");

//生成樹下拉菜單
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{//沒有子集直接顯示
  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í)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • js拖拉表格實(shí)現(xiàn)內(nèi)容計(jì)算

    js拖拉表格實(shí)現(xiàn)內(nèi)容計(jì)算

    這篇文章主要為大家詳細(xì)介紹了js拖拉表格實(shí)現(xiàn)內(nèi)容計(jì)算,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-04-04
  • 深入淺出JavaScript前端中的設(shè)計(jì)模式

    深入淺出JavaScript前端中的設(shè)計(jì)模式

    這篇文章主要介紹了JavaScript前端中的設(shè)計(jì)模式,設(shè)計(jì)模式是一套被反復(fù)使用,多數(shù)人知曉的,經(jīng)過分類編目的,代碼設(shè)計(jì)經(jīng)驗(yàn)的總結(jié),感興趣想要詳細(xì)了解可以參考下文
    2023-05-05
  • JS定時(shí)器不可靠的原因及解決方案

    JS定時(shí)器不可靠的原因及解決方案

    JavaScript中所有的任務(wù)分為同步任務(wù)與異步任務(wù),同步任務(wù),顧名思義就是立即執(zhí)行的任務(wù),它一般是直接進(jìn)入到主線程中執(zhí)行,這篇文章主要介紹了JS定時(shí)器不可靠的原因及解決方案,需要的朋友可以參考下
    2022-01-01
  • 優(yōu)化javascript的執(zhí)行速度

    優(yōu)化javascript的執(zhí)行速度

    這個(gè)是我在網(wǎng)上找的資料,具體的出處,我已經(jīng)記不清楚了,覺得很不錯(cuò),就和大家分享了
    2010-01-01
  • JS+Canvas實(shí)現(xiàn)接球小游戲的示例代碼

    JS+Canvas實(shí)現(xiàn)接球小游戲的示例代碼

    本文主要為大家詳細(xì)介紹了如何利用JS+Canvas實(shí)現(xiàn)接球小游戲,文中的示例代碼講解詳細(xì),對(duì)我們學(xué)習(xí)有一定的幫助,感興趣的小伙伴可以了解一下
    2022-06-06
  • 微信小程序?qū)崿F(xiàn)天氣預(yù)報(bào)功能

    微信小程序?qū)崿F(xiàn)天氣預(yù)報(bào)功能

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)天氣預(yù)報(bào)功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2018-07-07
  • 如何使用不同的方法在 JavaScript 中添加兩個(gè)向量

    如何使用不同的方法在 JavaScript 中添加兩個(gè)向量

    這篇文章主要介紹了如何在 JavaScript 中添加向量(Vector)類,使用不同的方法在 JavaScript 中添加兩個(gè)向量,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2023-06-06
  • 三種方式獲取XMLHttpRequest對(duì)象

    三種方式獲取XMLHttpRequest對(duì)象

    這篇文章主要介紹了獲取XMLHttpRequest對(duì)象的三種方式,需要的朋友可以參考下
    2014-04-04
  • JS實(shí)現(xiàn)的幻燈片切換顯示效果

    JS實(shí)現(xiàn)的幻燈片切換顯示效果

    這篇文章主要介紹了JS實(shí)現(xiàn)的幻燈片切換顯示效果,涉及javascript通過擴(kuò)展實(shí)現(xiàn)針對(duì)頁(yè)面元素的動(dòng)態(tài)切換操作相關(guān)技巧,需要的朋友可以參考下
    2016-09-09
  • javascript跨域刷新實(shí)現(xiàn)代碼

    javascript跨域刷新實(shí)現(xiàn)代碼

    在XX項(xiàng)目里面需要通過一個(gè)iframe去刷新同一窗口的另外一個(gè)iframe。一個(gè)超級(jí)簡(jiǎn)單的處理,但我還在blog上記一記,有些看似簡(jiǎn)單的東西,在真實(shí)項(xiàng)目應(yīng)用中還是值得思考地方
    2011-01-01

最新評(píng)論