我就直接上代碼了都是實(shí)際項(xiàng)目里面用到的

1.假設(shè)這個(gè)json就已經(jīng)是樹型結(jié)構(gòu)數(shù)據(jù)了(如果不知道怎么實(shí)現(xiàn)樹型結(jié)構(gòu)數(shù)據(jù)請(qǐng)看我另一篇博客)

var compressedArr=afcommon.treeDataToCompressed(json);

/*******************************JS封裝好的方法*********************************************/

var afcommon=(function ($) {

var prefix="|—";

let compressedData=[];// 用于存儲(chǔ)遞歸結(jié)果(扁平數(shù)據(jù))

return {

/**

* 把扁平數(shù)據(jù)轉(zhuǎn)成樹型結(jié)構(gòu)數(shù)據(jù)(可以實(shí)現(xiàn)無(wú)限層級(jí)樹形數(shù)據(jù)結(jié)構(gòu)，只適用于單個(gè)表的數(shù)據(jù))

* @param source

* @param id

* @param parentId

* @param children

*/

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

let cloneData = JSON.parse(JSON.stringify(source)); // 對(duì)源數(shù)據(jù)深度克隆

return cloneData.filter(father=>{ // 循環(huán)所有項(xiàng)，并添加children屬性

let branchArr = cloneData.filter(child => father[id] == child[parentId]); // 返回每一項(xiàng)的子級(jí)數(shù)組

branchArr.length>0 ? father[children] = branchArr : '' //給父級(jí)添加一個(gè)children屬性，并賦值

return father[parentId] == 0 // 如果第一層不是parentId=0，請(qǐng)自行修改

})

},

/**

* 把樹型結(jié)構(gòu)數(shù)據(jù)轉(zhuǎn)成扁平數(shù)據(jù)(跟treeDataformat方法相反)

* @param source

*/

treeDataToCompressed :function (source) {

for(let i in source) {

compressedData.push(source[i]);

source[i].children && source[i].children.length>0 ? this.treeDataToCompressed(source[i].children) : ""// 子級(jí)遞歸

}

return compressedData;

},

/**

* 遞歸生成 樹下拉菜單

* @param JsonTree 此參數(shù)已經(jīng)是樹型結(jié)構(gòu)的數(shù)據(jù)了 如:JsonTree[{"id": "0","value":"測(cè)試","children": []}]

* @param typeId

* @param name

* @returns {string}

*/

creatSelectTree : function(JsonTree,typeId,name){//js腳本，遞歸生成 樹下拉菜單

var option="";

for(var i=0;i

if(JsonTree[i].children!= undefined && JsonTree[i].children.length>0){//如果有子集

option+=""+prefix+JsonTree[i][name]+"";

prefix+="|—";//前綴符號(hào)加一個(gè)符號(hào)

option+=this.creatSelectTree(JsonTree[i].children,typeId,name);//遞歸調(diào)用子集

prefix=prefix.slice(0,prefix.length-2);//每次遞歸結(jié)束返回上級(jí)時(shí)，前綴符號(hào)需要減一個(gè)符號(hào)

}else{//沒(méi)有子集直接顯示

option+=""+prefix+JsonTree[i][name]+"";

}

}

return option;//返回最終html結(jié)果

},

/**

* 適用于layer.confirm 動(dòng)態(tài)改變title 多語(yǔ)言切換

* layer.confirm(msg,{titel:'Message'},{btn: ['確定','取消']}, function () {},function () {}) (這樣寫改變title 好像會(huì)對(duì)后面的回調(diào)函數(shù)有影響，不信你試試)

* @param title

* @param index

*/

changeLayerTitle: function (title,index) {

return layer.title(title, index)

},

}

})(jQuery);

測(cè)試結(jié)構(gòu)：

好的東西就要懂得分享，推薦一個(gè)寫的好的博客一個(gè)字來(lái)形容———厲害！

總結(jié)

以上是生活随笔為你收集整理的Java树形转扁平_js把树形数据转成扁平数据的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。