基於JavaScript實現樹形下拉框

2021-07-24 11:54:26 字數 1037 閱讀 6813

的小夥伴們可以參考一下

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

大多數情況下後台會返回這樣的資料,如下:

[,,

,,,,

,,,,

,]

這種資料結構後台容易處理,但是前台不好處理,需要首先將其轉成樹形json資料,如下:

[

]},

]},,

, ,

]},]},

]

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

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

一、將list陣列結構的資料轉成tree結構json

//list 轉成樹形json

function listtotree(list,pid)

}return ret;//遞迴結束後返回結果}

var tree=listtotree(list,0);//呼叫函式,傳入要轉換的list陣列,和樹中頂級元素的pid

console.log(tree);

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

//在網頁中新增下拉框容器

//js指令碼,遞迴生成

//獲取容器物件

var selectbox=document.getelementbyid("selectbox");

//生成樹下拉列表

var j="-";//字首符號,用於顯示父子關係,這裡可以使用其它符號

function creatselecttree(d)else

} returnoption;//返回最終html結果 }

//呼叫函式,並將結構出入到下拉框容器中

selectbox.innerhtml=creatselecttree(tree);

基於雙佇列實現huffman樹

今天數算課講huffman樹,是基於堆實現的,突然想起以前實現過基於雙佇列的huffman樹,做個回顧。首先將n個元素從小到大排序,基於比較的排序都是nlogn的複雜度,這裡可以考慮用計數排序 即桶排序 或者基數排序嘗試優化到n試試。然後我們獲得了乙個有序佇列我們把它放在a佇列中,然後再找乙個空的b...

JavaScript 基於canvas的小遊戲

之前在寫的打小怪獸遊戲總算初步完工了,上 嘍 顯示元素 var score document.queryselectorall score 畫布元素 var container document.getelementbyid game var canvas document.getelementby...

javascript基於原型的繼承機制

請區分兩個物件 function物件及原型物件 以object為例 每個函式本身就是乙個建構函式 每個函式又對應乙個原型物件 1 當建立乙個變數時 var aa new object 等價於var aa aa.name fjs console.log aa.proto object.prototyp...