js遞歸生成樹形下拉菜單

需求：我需要把一個單表的數據轉換成類似菜單那種如圖所示：

我呢需要把這個菜單樹放入到下框里面去如圖所示：


下面是實現思路：
1.第一步
1.1var afTypeJson=${afTypeJson}// 這是從后台接口傳到jsp頁面的數據
看一下后台傳過來的源數據，里面並沒children字段

//把扁平數據轉成樹形數據(可以實現無限層級樹形數據結構，只適用於單個表的數據)
1.2var json=treeDataformat(afTypeJson,'typeId','parentId','children');
再來看一下數據：

 

 

 好的，走到這一步的話先恭喜下自己，已經成功一半啦！(趕緊奶一口白開水)

2.第二步

如果想實現圖二的效果我們需要給它偽造爸爸（父節點parentId: -1,typeId: 0,typeNameCn: "最頂層分類",typeNameEn: "Top"）這里面的字段根據
你自己的實際情況來改

2.1 var tree=[{parentId: -1,typeId: 0,typeNameCn: "最頂層分類",typeNameEn: "Top",children:common.deepClone(json)}];

2.2 var selectTree=creatSelectTree(tree);

2.3 var selectbox=document.getElementById("selectbox");//獲取容器對象

2.4 selectbox.innerHTML=selectbox;//調用函數，並將結構寫入到下拉框容器中

到這里就基本實現了

/*********************js封裝好的遞歸方法***********************************/

    /**
 * 把扁平數據轉成樹型結構數據(可以實現無限層級樹形數據結構，只適用於單個表的數據)
 * @param source（數據源）
 * @param id(根據你實際數據源里面的字段來改，反正是個字符串)
 * @param parentId(根據你實際數據源里面的字段來改，反正是個字符串)　　　
　　　* @param children (子節點,數據源里面是沒有此字段的，是自己加的，建議沒有別的要求就用'children'這個字段吧)
　　*/

var prefix="|—";

function treeDataformat (source, id, parentId, children){

 let cloneData = JSON.parse(JSON.stringify(source)); // 對源數據深度克隆
 return cloneData.filter(father=>{ // 循環所有項，並添加children屬性
 let branchArr = cloneData.filter(child => father[id] == child[parentId]); // 返回每一項的子級數組
 branchArr.length>0 ? father[children] = branchArr : '' //給父級添加一個children屬性，並賦值
 return father[parentId] == 0 // 如果第一層不是parentId=0，請自行修改
 })
 },

/**
 * 遞歸生成 樹下拉菜單
 * @param JsonTree 此參數已經是樹型結構的數據了 如:JsonTree[{"id": "0","value":"測試","children": []}]
 * @param typeId
 * @param name
 * @returns {string}
 */
creatSelectTree : function(JsonTree,typeId,name){//js腳本，遞歸生成 樹下拉菜單
var option="";
    for(var i=0;i<JsonTree.length;i++){
        if(JsonTree[i].children!= undefined && JsonTree[i].children.length>0){//如果有子集
option+="<option value='"+JsonTree[i][typeId]+"'>"+prefix+JsonTree[i][name]+"</option>";
            prefix+="|—";//前綴符號加一個符號
option+=this.creatSelectTree(JsonTree[i].children,typeId,name);//遞歸調用子集
prefix=prefix.slice(0,prefix.length-2);//每次遞歸結束返回上級時，前綴符號需要減一個符號
}else{//沒有子集直接顯示
option+="<option value='"+JsonTree[i][typeId]+"'>"+prefix+JsonTree[i][name]+"</option>";
        }
    }
    return option;//返回最終html結果
},


覺得我寫的羅里吧嗦的可以看看下面的博客：（靈感的源泉）
https://blog.csdn.net/Mr_JavaScript/article/details/82817177?utm_source=blogxgwz5

https://blog.csdn.net/Mr_JavaScript/article/details/102833991

https://www.jb51.net/article/90195.htm