js把树形数据转成扁平数据

Posted 星期7

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js把树形数据转成扁平数据相关的知识,希望对你有一定的参考价值。

我就直接上代码了都是实际项目里面用到的

1.假设这个json就已经是树型结构数据了(如果不知道怎么实现树型结构数据请看我另一篇博客
var compressedArr=afcommon.treeDataToCompressed(json);

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

var afcommon=(function ($) {
var prefix="|—";
let compressedData=[];// 用于存储递归结果(扁平数据)
return {

/**
* 把扁平数据转成树型结构数据(可以实现无限层级树形数据结构,只适用于单个表的数据)
* @param source
* @param id
* @param parentId
* @param children
*/
treeDataformat : function(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,请自行修改
})
},
/**
* 把树型结构数据转成扁平数据(跟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) : ""// 子级递归
}
return compressedData;
},
/**
* 递归生成 树下拉菜单
* @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结果
},
/**
* 适用于layer.confirm 动态改变title 多语言切换
* layer.confirm(msg,{titel:\'Message\'},{btn: [\'确定\',\'取消\']}, function () {},function () {}) (这样写改变title 好像会对后面的回调函数有影响,不信你试试)
* @param title
* @param index
*/
changeLayerTitle: function (title,index) {
return layer.title(title, index)
},
}
})(jQuery);

测试结构:

好的东西就要懂得分享,推荐一个写的好的博客一个字来形容———厉害!

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

以上是关于js把树形数据转成扁平数据的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript 扁平与树形数组数据的转换

树形数据结构和扁平数据相互转换

浅理解扁平数据结构转Tree(树形结构)

Javascript中扁平化数据结构与JSON树形结构转换详解

JavaScript扁平数组结构转换成JSON树形结构无限极forEachpushchildren

JavaScript递归树形扁平数组笔试题reduceforEachconcat