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

原文地址：https://www.cnblogs.com/time1997/p/12228506.html