基于JavaScript實(shí)現(xiàn)樹形下拉框
平時(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í)有所幫助,也希望大家多多支持腳本之家。
- js實(shí)現(xiàn)帶搜索功能的下拉框?qū)崟r(shí)搜索實(shí)時(shí)匹配
- jquery及原生js獲取select下拉框選中的值示例
- Extjs中ComboBoxTree實(shí)現(xiàn)的下拉框樹效果(自寫)
- js 動(dòng)態(tài)選中下拉框
- 基于jquery的無限級(jí)聯(lián)下拉框js插件
- Js獲取下拉框選定項(xiàng)的值和文本的實(shí)現(xiàn)代碼
- JS實(shí)現(xiàn)下拉框的動(dòng)態(tài)添加(附效果)
- JS操作select下拉框動(dòng)態(tài)變動(dòng)(創(chuàng)建/刪除/獲取)
- js 自定義的聯(lián)動(dòng)下拉框
- javascript 下拉框顯示當(dāng)前日期
相關(guān)文章
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ì)模式,設(shè)計(jì)模式是一套被反復(fù)使用,多數(shù)人知曉的,經(jīng)過分類編目的,代碼設(shè)計(jì)經(jīng)驗(yàn)的總結(jié),感興趣想要詳細(xì)了解可以參考下文2023-05-05JS+Canvas實(shí)現(xiàn)接球小游戲的示例代碼
本文主要為大家詳細(xì)介紹了如何利用JS+Canvas實(shí)現(xiàn)接球小游戲,文中的示例代碼講解詳細(xì),對(duì)我們學(xué)習(xí)有一定的幫助,感興趣的小伙伴可以了解一下2022-06-06微信小程序?qū)崿F(xiàn)天氣預(yù)報(bào)功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)天氣預(yù)報(bào)功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-07-07如何使用不同的方法在 JavaScript 中添加兩個(gè)向量
這篇文章主要介紹了如何在 JavaScript 中添加向量(Vector)類,使用不同的方法在 JavaScript 中添加兩個(gè)向量,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06