亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

基于JavaScript實現樹形下拉框

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

平時會經常遇到樹形結構的問題,比如顯示目錄結構等。

大多數情況下后臺會返回這樣的數據,如下:

[
{ 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: '視覺設計' },
{ id: 63, pid: 61, name: '網頁設計' },
]

這種數據結構后臺容易處理,但是前臺不好處理,需要首先將其轉成樹形json數據,如下:

[
{ 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: '視覺設計',children:[{ id: 63, pid: 61, name: '網頁設計' }]},
]

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

如果后臺能夠直接返回這種結構最好,不然前臺需要做轉換。

一、將list數組結構的數據轉成tree結構json

//list 轉成樹形json
function listToTree(list,pid) {
var ret = [];//一個存放結果的臨時數組
for(var i in list) {
if(list[i].pid == pid) {//如果當前項的父id等于要查找的父id,進行遞歸
 list[i].children = listToTree(list, list[i].id);
 ret.push(list[i]);//把當前項保存到臨時數組中
}
}
return ret;//遞歸結束后返回結果
}

var tree=listToTree(list,0);//調用函數,傳入要轉換的list數組,和樹中頂級元素的pid

console.log(tree);


二、根據tree結構json數據生成下拉框

//在網頁中添加下拉框容器
<select id="selectbox" name=""></select>
//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+="<option value='"+d[i].id+"'>"+j+d[i].name+"</option>";
 j+="-";//前綴符號加一個符號
  option+=creatSelectTree(d[i].children);//遞歸調用子集
 j=j.slice(0,j.length-1);//每次遞歸結束返回上級時,前綴符號需要減一個符號
  }else{//沒有子集直接顯示
  option+="<option value='"+d[i].id+"'>"+j+d[i].name+"</option>";
  }
  }
 return option;//返回最終html結果
 }

//調用函數,并將結構出入到下拉框容器中
selectbox.innerHTML=creatSelectTree(tree);

如果大家還想深入學習,可以點擊jquery下拉框效果匯總、JavaScript下拉框效果匯總進行學習。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • js拖拉表格實現內容計算

    js拖拉表格實現內容計算

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

    深入淺出JavaScript前端中的設計模式

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

    JS定時器不可靠的原因及解決方案

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

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

    這個是我在網上找的資料,具體的出處,我已經記不清楚了,覺得很不錯,就和大家分享了
    2010-01-01
  • JS+Canvas實現接球小游戲的示例代碼

    JS+Canvas實現接球小游戲的示例代碼

    本文主要為大家詳細介紹了如何利用JS+Canvas實現接球小游戲,文中的示例代碼講解詳細,對我們學習有一定的幫助,感興趣的小伙伴可以了解一下
    2022-06-06
  • 微信小程序實現天氣預報功能

    微信小程序實現天氣預報功能

    這篇文章主要為大家詳細介紹了微信小程序實現天氣預報功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-07-07
  • 如何使用不同的方法在 JavaScript 中添加兩個向量

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

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

    三種方式獲取XMLHttpRequest對象

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

    JS實現的幻燈片切換顯示效果

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

    javascript跨域刷新實現代碼

    在XX項目里面需要通過一個iframe去刷新同一窗口的另外一個iframe。一個超級簡單的處理,但我還在blog上記一記,有些看似簡單的東西,在真實項目應用中還是值得思考地方
    2011-01-01

最新評論