背景

项目开展中，有些数据往往具有层级关系，在数据中用ID、Parent来标示，那么在前端如何有效的还原这种层级关系，而其是很多层级的情况，方便的将数据加载的树、下拉列表等控件中？

方案

本方案，通过递归调用的方式，将子记录加载的所在父记录的children属性中，理论上支持无限层级的构建。其中originData为从数据库获取的原始记录，记录中包含ID、Parent标示层级关系，Parent为空表示顶级记录；treeData表示最终结果，具有层级关系的Javascript对象，子记录存储在children中。

var treeData = [];
// 准备工作，为每条记录先添加children
originData.forEach(element => {
    element.children = [];
});

// 开始构建
originData.forEach(element => {
    if (element.Parent == null) {
        getChildren(element);
        treeData.push(element);
    }
});

// 递归方法获取并挂载子记录，理论上支持无限层级
function getChildren(node) {
    originData.forEach(element => {
        if (element.Parent == node.ID) {
            getChildren(element);
            node.children.push(element);
        }
    });
}

提示

本方案，未特别考虑效率问题。