精华内容
下载资源
问答
  • 主要介绍了javascript将扁平的数据转为树形结构的高效率算法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • function translateDataToTree(data, config) { const { pId = 'pId', id = 'id', children = 'children' } = config let parents = data.filter(v => [undefined, null, 'undefined', 0].includes(v[pId])) ...
    function translateArrToTree(data, config) {
        const { pId = 'pId', id = 'id', children = 'children' } = config
    
        let parents = data.filter(v => [undefined, null, 'undefined', 0].includes(v[pId]))
        let childrens = data.filter(v => ![undefined, null, 'undefined', 0].includes(v[pId]))
    
      	const translator = (parents, childrens) => {
    	    parents.forEach(p => {
    	        childrens.forEach((cur, index) => {
    	            if (cur[pId] === p[id]) {
    	                let temp = JSON.parse(JSON.stringify(childrens))
    	                temp.splice(index, 1)
    	
    	                translator([cur], temp)
    	
    	                typeof p[children] !== 'undefined' ? p[children].push(cur) : p[children] = [cur]
    	            }
    	        })
    	    })
    	}
    	translator(parents, childrens)
    	return parents
    }
    
    展开全文
  • id: 3, name: "南昌市" } ] 将扁平的数据转为树形结构的几种方法 function listToTree(list) { let map = {}; list.forEach(item => { if (! map[item.id]) { map[item.id] = item; } }); list.forEach(item => { if...

    扁平菜单示例如下:

    var menu_list = [{

    id: '1',

    menu_name: '设置',

    menu_url: 'setting',

    parent_id: 0

    }, {

    id: '1-1',

    menu_name: '权限设置',

    menu_url: 'setting.permission',

    parent_id: '1'

    }, {

    id: '1-1-1',

    menu_name: '用户管理列表',

    menu_url: 'setting.permission.user_list',

    parent_id: '1-1'

    }, {

    id: '1-1-2',

    menu_name: '用户管理新增',

    menu_url: 'setting.permission.user_add',

    parent_id: '1-1'

    }, {

    id: '1-1-3',

    menu_name: '角色管理列表',

    menu_url: 'setting.permission.role_list',

    parent_id: '1-1'

    }, {

    id: '1-1-4',

    menu_name: '角色管理新增',

    menu_url: 'setting.permission.role_add',

    parent_id: '1-1'

    }, {

    id: '1-2',

    menu_name: '菜单设置',

    menu_url: 'setting.menu',

    parent_id: '1'

    }, {

    id: '1-2-1',

    menu_name: '菜单列表',

    menu_url: 'setting.menu.menu_list',

    parent_id: '1-2'

    }, {

    id: '1-2-2',

    menu_name: '菜单添加',

    menu_url: 'setting.menu.menu_add',

    parent_id: '1-2'

    }, {

    id: '2',

    menu_name: '订单',

    menu_url: 'order',

    parent_id: 0

    }, {

    id: '2-1',

    menu_name: '报单审核',

    menu_url: 'order.orderreview',

    parent_id: '2'

    }, {

    id: '2-2',

    menu_name: '退款管理',

    menu_url: 'order.refundmanagement',

    parent_id: '2'

    }, {

    id: '2-3',

    menu_name: '实物订单',

    menu_url: 'order.realorder',

    parent_id: '2'

    }, {

    id: '2-1-1',

    menu_name: '全部报单',

    menu_url: 'order.orderreview.all',

    parent_id: '2-1'

    }, {

    id: '2-2-1',

    menu_name: '所有记录',

    menu_url: 'order.refundmanagement.all',

    parent_id: '2-2'

    }, {

    id: '2-2-2',

    menu_name: '待处理',

    menu_url: 'order.refundmanagement.wait',

    parent_id: '2-2'

    }, {

    id: '2-2-3',

    menu_name: '退款原因',

    menu_url: 'order.refundmanagement.result',

    parent_id: '2-2'

    }, {

    id: '2-3-1',

    menu_name: '实物订单管理',

    menu_url: 'order.realorder.list',

    parent_id: '2-3'

    }, {

    id: '3',

    menu_name: '商品',

    menu_url: 'commodity',

    parent_id: 0

    }, {

    id: '3-1',

    menu_name: '分类管理',

    menu_url: 'commodity.classifieldmanagement',

    parent_id: '3'

    }, {

    id: '3-1-1',

    menu_name: '管理',

    menu_url: 'commodity.classifieldmanagement.management',

    parent_id: '3-1'

    }, {

    id: '3-1-2',

    menu_name: '编辑或新增',

    menu_url: 'commodity.classifieldmanagement.edit',

    parent_id: '3-1'

    }, {

    id: '3-2',

    menu_name: '品牌管理',

    menu_url: 'commodity.brandmanagement',

    parent_id: '3'

    }, {

    id: '3-2-1',

    menu_name: '管理',

    menu_url: 'commodity.brandmanagement.management',

    parent_id: '3-2'

    }, {

    id: '3-2-2',

    menu_name: '编辑或新增',

    menu_url: 'commodity.brandmanagement.edit',

    parent_id: '3-2'

    }, {

    id: '3-3',

    menu_name: '商品管理',

    menu_url: 'commodity.commoditymanagement',

    parent_id: '3'

    }, {

    id: '3-3-1',

    menu_name: '管理',

    menu_url: 'commodity.commoditymanagement.management',

    parent_id: '3-3'

    }, {

    id: '3-3-2',

    menu_name: '编辑或新增',

    menu_url: 'commodity.commoditymanagement.edit',

    parent_id: '3-3'

    }, {

    id: '3-4',

    menu_name: '类型管理',

    menu_url: 'commodity.typeManagement',

    parent_id: '3'

    }, {

    id: '3-4-1',

    menu_name: '管理',

    menu_url: 'commodity.typeManagement.management',

    parent_id: '3-4'

    }, {

    id: '3-4-2',

    menu_name: '编辑或新增',

    menu_url: 'commodity.typeManagement.edit',

    parent_id: '3-4'

    }];

    1、 O(n)级算法

    function buildTree(list){

    let temp = {};

    let tree = {};

    for(let i in list){

    temp[list[i].id] = list[i];

    }

    for(let i in temp){

    if(temp[i].parent_id) {

    if(!temp[temp[i].parent_id].children) {

    temp[temp[i].parent_id].children = new Object();

    }

    temp[temp[i].parent_id].children[temp[i].id] = temp[i];

    } else {

    tree[temp[i].id] = temp[i];

    }

    }

    return tree;

    }

    2、let array = [

    {

    id: 1,

    parent_id: 0,

    name: "四川省"

    },

    {

    id: 2,

    parent_id: 0,

    name: "广东省"

    },

    {

    id: 3,

    parent_id: 0,

    name: "江西省"

    },

    {

    id: 5,

    parent_id: 1,

    name: "成都市"

    },

    {

    id: 6,

    parent_id: 5,

    name: "锦江区"

    },

    {

    id: 7,

    parent_id: 6,

    name: "九眼桥"

    },

    {

    id: 8,

    parent_id: 6,

    name: "兰桂坊"

    },

    {

    id: 9,

    parent_id: 2,

    name: "东莞市"

    },

    {

    id: 10,

    parent_id: 9,

    name: "长安镇"

    },

    {

    id: 11,

    parent_id: 3,

    name: "南昌市"

    }

    ]

    将扁平的数据转为树形结构的几种方法

    function listToTree(list) {

    let map = {};

    list.forEach(item => {

    if (! map[item.id]) {

    map[item.id] = item;

    }

    });

    list.forEach(item => {

    if (item.parent_id !== 0) {

    map[item.parent_id].children ? map[item.parent_id].children.push(item) :

    map[item.parent_id].children = [item];

    }

    });

    return list.filter(item => {

    if (item.parent_id === 0) {

    return item;

    }

    })

    }

    console.log(listToTree(array));

    思路:1、先将数组中的所有元素都复制到 map 中(注意:这里是引用复制哦,这个细节很重要)

    2、时候遍历 parent_id 不等于 0 的元素,根据当前item的id去和map对象中的引用id进行对比,如果一致就说明该对象就是他的children,然后判断了是否存在 children,如果不存在则直接给它赋值,否则将值 push 到 children 中。

    3、过滤parentid=0的数据

    展开全文
  • javascript将扁平的数据转为树形结构(高效率)

    万次阅读 多人点赞 2017-11-29 10:16:44
    当我们需要将一个一维数组转换成一个多层结构的时候,最简单但是最慢的就是多个for循环嵌套,但是这样做有一些缺点,那就是效率太低、而且有多少层就需要嵌套几个for循环,不好用。 我实现了用O(n)级算法将 一个...

    当我们需要将一个一维数组转换成一个多层结构的时候,最简单但是最慢的就是多个for循环嵌套,但是这样做有一些缺点,那就是效率太低、而且有多少层就需要嵌套几个for循环,不好用。

    我实现了用O(n)级算法将 一个扁平的数组即一维数组代表的菜单结构转换成一个多层级的菜单结构。

    一位数组中每一个元素必须要包含以下属性:

    1. 拥有一个唯一的id
    2. 拥有一个parent_id, 这个id指向它父级的id

    其他则为每一个元素中的一些信息,我这里是菜单,就有菜单的名称和url信息。

    注:

    1. 在层级结构中,第一层的parent_id需要为0.
    2. 父节点在数组中的位置需要在子节点前,即 节点3必须排在节点3-2之前

    扁平数组例:

    var menu_list = [{
          id: '1',
          menu_name: '设置',
          menu_url: 'setting',
          parent_id: 0
        }, {
          id: '1-1',
          menu_name: '权限设置',
          menu_url: 'setting.permission',
          parent_id: '1'
        }, {
          id: '1-1-1',
          menu_name: '用户管理列表',
          menu_url: 'setting.permission.user_list',
          parent_id: '1-1'
        }, {
          id: '1-1-2',
          menu_name: '用户管理新增',
          menu_url: 'setting.permission.user_add',
          parent_id: '1-1'
        }, {
          id: '1-1-3',
          menu_name: '角色管理列表',
          menu_url: 'setting.permission.role_list',
          parent_id: '1-1'
        }, {
          id: '1-2',
          menu_name: '菜单设置',
          menu_url: 'setting.menu',
          parent_id: '1'
        }, {
          id: '1-2-1',
          menu_name: '菜单列表',
          menu_url: 'setting.menu.menu_list',
          parent_id: '1-2'
        }, {
          id: '1-2-2',
          menu_name: '菜单添加',
          menu_url: 'setting.menu.menu_add',
          parent_id: '1-2'
        }, {
          id: '2',
          menu_name: '订单',
          menu_url: 'order',
          parent_id: 0
        }, {
          id: '2-1',
          menu_name: '报单审核',
          menu_url: 'order.orderreview',
          parent_id: '2'
        }, {
          id: '2-2',
          menu_name: '退款管理',
          menu_url: 'order.refundmanagement',
          parent_id: '2'
        }
    ]

    实现算法buildTree

    算法思想:

    1. 先将数组中的每一个节点放到temp对象中(创建set)
      即数组中有{id: '2-3', parent_id: '2',...}这样一个节点,需要将他放到temp中变成 '2-3': {id: '2-3', parent_id: '2',...}这种JSON结构
    2. 直接遍历整个temp对象,通过这句代码   temp[temp[i].parent_id].children[temp[i].id] = temp[i];   将当前子节点与父节点建立连接。是因为我们保证了父节点一定在子节点前,那么当子节点出现的时候就直接可以用temp[temp[i].parent_id]来查找到父节点这个时候先父节点的children对象中添加一个引用即可。
    /**
     * 将一维的扁平数组转换为多层级对象
     * @param  {[type]} list 一维数组,数组中每一个元素需包含id和parent_id两个属性 
     * @return {[type]} tree 多层级树状结构
     */
    function buildTree(list){
    	let temp = {};
    	let tree = {};
    	for(let i in list){
    		temp[list[i].id] = list[i];
    	}
    	for(let i in temp){
    		if(temp[i].parent_id) {
    			if(!temp[temp[i].parent_id].children) {
    				temp[temp[i].parent_id].children = new Object();
    			}
    			temp[temp[i].parent_id].children[temp[i].id] = temp[i];
    		} else {
    			tree[temp[i].id] =  temp[i];
    		}
    	}
    	return tree;
    }

    测试结果:

    可以看到函数成功地构建了多级的树状结构

     

    这个算法的效率是极高的,比多重for循环来的好得多。

     

     

     

     

    以下是测试数据,用时只需5毫秒左右:

    
    var menu_list = [{
          id: '1',
          menu_name: '设置',
          menu_url: 'setting',
          parent_id: 0
        }, {
          id: '1-1',
          menu_name: '权限设置',
          menu_url: 'setting.permission',
          parent_id: '1'
        }, {
          id: '1-1-1',
          menu_name: '用户管理列表',
          menu_url: 'setting.permission.user_list',
          parent_id: '1-1'
        }, {
          id: '1-1-2',
          menu_name: '用户管理新增',
          menu_url: 'setting.permission.user_add',
          parent_id: '1-1'
        }, {
          id: '1-1-3',
          menu_name: '角色管理列表',
          menu_url: 'setting.permission.role_list',
          parent_id: '1-1'
        }, {
          id: '1-1-4',
          menu_name: '角色管理新增',
          menu_url: 'setting.permission.role_add',
          parent_id: '1-1'
        }, {
          id: '1-2',
          menu_name: '菜单设置',
          menu_url: 'setting.menu',
          parent_id: '1'
        }, {
          id: '1-2-1',
          menu_name: '菜单列表',
          menu_url: 'setting.menu.menu_list',
          parent_id: '1-2'
        }, {
          id: '1-2-2',
          menu_name: '菜单添加',
          menu_url: 'setting.menu.menu_add',
          parent_id: '1-2'
        }, {
          id: '2',
          menu_name: '订单',
          menu_url: 'order',
          parent_id: 0
        }, {
          id: '2-1',
          menu_name: '报单审核',
          menu_url: 'order.orderreview',
          parent_id: '2'
        }, {
          id: '2-2',
          menu_name: '退款管理',
          menu_url: 'order.refundmanagement',
          parent_id: '2'
        }, {
          id: '2-3',
          menu_name: '实物订单',
          menu_url: 'order.realorder',
          parent_id: '2'
        }, {
          id: '2-1-1',
          menu_name: '全部报单',
          menu_url: 'order.orderreview.all',
          parent_id: '2-1'
        }, {
          id: '2-2-1',
          menu_name: '所有记录',
          menu_url: 'order.refundmanagement.all',
          parent_id: '2-2'
        }, {
          id: '2-2-2',
          menu_name: '待处理',
          menu_url: 'order.refundmanagement.wait',
          parent_id: '2-2'
        }, {
          id: '2-2-3',
          menu_name: '退款原因',
          menu_url: 'order.refundmanagement.result',
          parent_id: '2-2'
        }, {
          id: '2-3-1',
          menu_name: '实物订单管理',
          menu_url: 'order.realorder.list',
          parent_id: '2-3'
        }, {
          id: '3',
          menu_name: '商品',
          menu_url: 'commodity',
          parent_id: 0
        }, {
          id: '3-1',
          menu_name: '分类管理',
          menu_url: 'commodity.classifieldmanagement',
          parent_id: '3'
        }, {
          id: '3-1-1',
          menu_name: '管理',
          menu_url: 'commodity.classifieldmanagement.management',
          parent_id: '3-1'
        }, {
          id: '3-1-2',
          menu_name: '编辑或新增',
          menu_url: 'commodity.classifieldmanagement.edit',
          parent_id: '3-1'
        }, {
          id: '3-2',
          menu_name: '品牌管理',
          menu_url: 'commodity.brandmanagement',
          parent_id: '3'
        }, {
          id: '3-2-1',
          menu_name: '管理',
          menu_url: 'commodity.brandmanagement.management',
          parent_id: '3-2'
        }, {
          id: '3-2-2',
          menu_name: '编辑或新增',
          menu_url: 'commodity.brandmanagement.edit',
          parent_id: '3-2'
        }, {
          id: '3-3',
          menu_name: '商品管理',
          menu_url: 'commodity.commoditymanagement',
          parent_id: '3'
        }, {
          id: '3-3-1',
          menu_name: '管理',
          menu_url: 'commodity.commoditymanagement.management',
          parent_id: '3-3'
        }, {
          id: '3-3-2',
          menu_name: '编辑或新增',
          menu_url: 'commodity.commoditymanagement.edit',
          parent_id: '3-3'
        }, {
          id: '3-4',
          menu_name: '类型管理',
          menu_url: 'commodity.typeManagement',
          parent_id: '3'
        }, {
          id: '3-4-1',
          menu_name: '管理',
          menu_url: 'commodity.typeManagement.management',
          parent_id: '3-4'
        }, {
          id: '3-4-2',
          menu_name: '编辑或新增',
          menu_url: 'commodity.typeManagement.edit',
          parent_id: '3-4'
        }];

    这是我一个大二学生想出来的,挺开心的,因为当时看到老师用的3个for循环嵌套。嘿嘿嘿 

    展开全文
  • //树形节点id private String cId; //树形节点名称 private String cName; //标签创建人 private String cCreator; //团队id private String cTeamId; //标签颜色 private Byte nColour; //是否是父级标签 private ...

    一、pojo类

    //树形节点id
    private String cId;
    //树形节点名称
    private String cName;
    //标签创建人
    private String cCreator;
    //团队id
    private String cTeamId;
    //标签颜色
    private Byte nColour;
    //是否是父级标签
    private Byte nLabelType;
    //父级id
    private String cPid;
    //是否删除
    private Byte nDelete;
    //标签管理子集
    rivate List<TCaseLabel> childLabel =new ArrayList();
    
    //set/get省略……
    //有参和无参构造省略……
    //toString方法省略……
    

    二、封装工具类

         /**
         * 使用递归方法建树
         * @param menuTrees  子节点集合
         * @return List<MenuTree>
         */
        public static List<TCaseLabel> buildByRecursive(List<TCaseLabel> labelTrees) {
            List<TCaseLabel> trees = new ArrayList<>();
            for (TCaseLabel labelTree : labelTrees) {
             //菜单级别为0,则是一级数据(本次结构最多只有两级,所以直接获取根目录)
                if ("0".equals(labelTree.getcPid())) {
                    trees.add(findChildren(labelTree,labelTrees));
                }
                /*菜单级别为0,则是一级数据,根据实际情况判断可修改相关关联判断
                if ("0".equals(menuTree.getLevel())) {
                    trees.add(findChildren(menuTree,menuTrees));
                }*/
            }
            return trees;
        }
    
        /**
         * 递归查找子节点
         * @param menuTree  菜单数对象
         * @param menuTrees  子节点
         * @return MenuTree
         */
        private static TCaseLabel findChildren(TCaseLabel labelTree,List<TCaseLabel> labelTrees) {
            for (TCaseLabel it : labelTrees) {
                if(labelTree.getcId().equals(it.getcPid())) {
                    if (labelTree.getChildLabel() == null) {
                     labelTree.setChildLabel(new ArrayList<TCaseLabel>());
                    }
                    labelTree.getChildLabel().add(findChildren(it,labelTrees));
                }
            }
            return labelTree;
        }
    

    三、调用

    List<TCaseLabel> parentList = buildByRecursive(tCaseLabelMapper.queryLabelList(label));
    

    比较简单,嗯~但还是记一下吧♥

    展开全文
  • 当我们需要将一个一维数组转换成一个多层结构的时候,最简单但是最慢的就是多个for循环嵌套,但是这样做有一些缺点,那就是效率太低、而且有多少层就需要嵌套几个for循环,不好用。 我实现了用O(n)级算法将 一个...
  • id pid数据转为树形数据结构

    千次阅读 2018-11-23 08:41:00
    树形数据在数据库中一般是使用id和pid来记录: ...复制代码这种数据怎么转成前端所需的树形数据结构呢? 代码如下: var flatLs = [ {id: 1, pid: 0}, {id: 2, pid: 0}, {id: 3, pid: 0}, {id: 4, pid: 1}, {i...
  • 1、通过转化成json封装数据原始数据如下[{"name":"甘肃省","pid":0,"id":1},{"name":"天水市","pid":1,"id":2},{"name":"秦州区","pid":2,"id":3},{"name":...现需要是使用java将以上数据转为树形结构,转化后下的结...
  • 如何将扁平化的数组转成树形结构,比如:const a = [[1,2,3],['a','b','c'],['A','B','C']];要求a数组转化后结果,如:[{label: '1',children:[{ label: 'a',children:[{label:'A'}]}]},{label: '2',children:[{ ...
  • js将数组转为树形结构

    千次阅读 2020-05-02 15:42:17
    js将数组转为树形结构1. 数据结构a. 数组结构实例b. 树形结构实例输出结果2. 算法实现 1. 数据结构 a. 数组结构 [{ // 其他属性省略 name: Id, children: [Id], }] 实例 const arryData = [ { name: 1, ...
  • "甘肃省","pid":0,"id":1},{"name":"天水市","pid":1,"id":2},{"name":"秦州区","pid":2,"id":3},{"name":"北京市","pid":0,"id":4},{"name":"昌平区","pid":4,"id":5}]现需要是使用java将以上数据转为树形结构,...
  • js-将数组对象结构转为树形结构

    千次阅读 2019-02-14 16:19:48
    会遇到这样的需求,将后端返回的列表集合按照父子关系转为树形结构;进行展示 这个时候就需要我们使用js将从后端获取到的数据进行转化了。 假设后端获取到的数据为: var treeList = [ { title: '系统管理', ...
  • 日常开发中可能会遇到一些需求,比如构建菜单,构建树形结构,数据库一般就使用父id来表示,为了降低数据库的查询压力,我们可以使用Java8中的Stream流一次性把数据查出来,然后通过流式处理,转为树形结构。...
  • 由于在做前端动态路由时,需要将后端的数据转为tree便于前端构造Vue Router 一、开发环境 JDK11(使用了forEach代替循环) 二、具体使用 1.思路 使用递归来获取子节点,在递归的过程中将已添加到树结构中的数据...
  • java 将查询结果集转为树形结构

    千次阅读 2019-05-02 16:57:33
    在需要使用树形菜单的时候,z-tree是可以直接传数据父级id 对应子集pid自动生成树形结构,但z-tree这个框架毕竟年级较大了大家都知道年纪大的人都长得丑毕竟像我这么年轻才能天下第一帅,在使用很多树形控件时候需要...
  • java将list转为树形结构

    千次阅读 2019-05-24 15:38:57
    1、通过转化成json封装数据 [ { "name":"甘肃省", "pid":0, "id":1 }, { "name":"天水市", "pid":1, "id":2 }, { "name":"秦州区", "pid":2, ...
  • 其中最典型的数据处理,就是树形结构数据,比如用在侧边栏菜单,比如去描述各部门之间的上下级关系等等.有的时候后端勤快一点,把它处理了,但是万一没有呢?那就需要前端去处理喽!另外补一句:坑爹的win10系统,又浪费了朕...
  • - 将JSONArray数组转为树状结构 - @param arr 需要转化的数据 - @param id 数据唯一的标识键值 - @param pid 父id唯一标识键值 - @param child 子节点键值 - @return JSONArray */ public static JSONArray ...
  • 数据结构 下面是我们转换前的数据: [ { "id":1, "parent_id":0, "name":"四川省" }, { "id":2, "parent_id":0, "name":"广东省" }, { "id":3, "parent_id":0, "name":"江西省" }, { "id":5, ...
  • 在日常开发工作中,我们经常碰到将线性的数据转换成树的需求,今天给大家分享一个...数据结构 下面是我们转换前的数据: [ { "id":1, "parent_id":0, "name":"四川省" }, { "id":2, "parent_id":0, "name":...
  • * @param arr 需要转化为属性结构的arr * @param id 数据唯一标示 * @param pid 父id唯一标识键 * @param child 子节点键 * @return */ public static JSONArray listToTree(JSONArray arr, String id, String pid, ...
  • emmmm题目的大概意思就是将下列数据: var data = [{ parentId: 0, id: 1, value: '1' }, { parentId: 3, id: 2, value: '2' }, { parentId: 0, id: 3, value: '3' }, { parentId: 1, id: 4, value: '4' }, { ...

空空如也

空空如也

1 2 3 4 5
收藏数 85
精华内容 34
关键字:

数据转为树形结构