JavaScript一种将数据库记录建立层级关系的处理方法

最新推荐文章于 2023-06-26 17:50:23 发布

原创最新推荐文章于 2023-06-26 17:50:23 发布 · 245 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

该方案介绍如何通过JavaScript处理具有层级关系的数据库记录，利用递归方法将子记录嵌套到父记录的children属性中，创建适用于前端展示如树形控件的数据结构。这种方法理论上支持无限层级，但未优化效率。

JavaScript一种将数据库记录建立层级关系的处理方法

背景
方案
提示

背景

项目开展中，有些数据往往具有层级关系，在数据中用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);
        }
    });
}

提示

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