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

2023-11-18

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);
        }
    });
}

提示

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

随机推荐

  • Python中常见文件操作,纯干货

    Python文件操作 一 关于文件 二 读写文件简单操作 三 文件权限 四 文件高级操作 五 大文件的读取 基本方法 常用函数 六 大文件的读取其他方式 一 关于文件 文件的作用 把一些数据储存起来 使用文件流程 打开文件 读写文件 关闭文
  • 什么是JIT

    一些其他解释的网站 http www sohu com a 169704040 464084 1 动态编译 dynamic compilation 指的是 在运行时进行编译 与之相对的是事前编译 ahead of time compilat
  • 用Google浏览器下载网页视频(包括优酷,土豆等网站视频)

    用Google浏览器下载网页视频 包括优酷 土豆等网站视频 一 准备工具 Google浏览器 Video download helper Chrome插件 二 步骤 1 安装Video download helper插件 1 下载网址 ht
  • 设计模式的 C++ 实现---原型模式

    前文回顾 单例模式 一 单例模式 二 观察者模式 简单工厂模式 工厂方法模式 一 工厂方法模式 二 抽象工厂模式 一 抽象工厂模式 二 前言 原型模式指直接用一个已经存在的对象来创建一个新的对象 然后对新对象进行稍微修改即可 类似复制的操作
  • 动手学CV-目标检测入门教程4:模型结构

    3 4 模型结构 本文来自开源组织 DataWhale CV小组创作的目标检测入门教程 对应开源项目 动手学CV Pytorch 的第3章的内容 教程中涉及的代码也可以在项目中找到 后续会持续更新更多的优质内容 欢迎 如果使用我们教程的内容
  • 在单链表中删除指定值的节点

    在单链表中删除指定值的节点 题目 给定一个单链表和一个数val 删除链表中所有值为val的节点 例如 1 gt 2 gt 3 gt 4 删除3 结果为 1 gt 2 gt 4 思路1 用栈 def remove node with val1
  • Java中如何设置注释模板呢?

    转自 Java中如何设置注释模板呢 下文笔者讲述在日常开发IDE工具中设置注释模板的方法分享 如下所示 Eclipse中设置Java注释模板 Eclipse设置注释模板的菜单 Window gt Preference gt Java gt
  • 实时音频编解码之八 频带扩展

    本文谢绝任何形式转载 谢谢 1 4 8 频带扩展 在线性预测应用中 由于极点过于靠近单位圆 合成滤波器可能处于临界稳定的状态 在定点实现中这一问题更加严重 定点的量化和计算中的精度损失可能使得临界稳定的滤波器变得不稳定 极点位于单位圆外 这
  • maven 配置篇 之 settings.xml 整理中...

    maven 配置 settings xml maven2比起maven1 来说 需要配置的文件少多了 主要集中在pom xml和settings xml中 先来说说settings xml settings xml对于maven 来说相 当
  • 【JS】jsx/tsx是什么?为什么 Vue3 的组件库都在使用 jsx/tsx?如何在Vue3中使用 jsx/tsx?

    前几天得到一个疑问 为什么 React 要用 JSX 语法 这样显得代码好像 很耦合 按照传统应推荐 html js css 模版分离 这样设计的优越性到底在哪里 一 jsx是什么 JSX 即 javascript Xml的缩写 是Face
  • Springboot 封装ssh 服务

    前提条件 Linux 已经启动SSH 服务或Windows 启动SSH 服务 整体项目结构 第一步 BuleSky 的pom xml 文件
  • CMake——cmake_minimum_required

    命令简介 cmake minimum required用于设定cmake的最低版本 cmake minimum required VERSION
  • 入门强化学习(Q-learning→DQN→DDQN)

    基础 只要具备CNN分类算法的基本认识 讲解内容 内容主要通过 飞翔小鸟 游戏为例 探究如下2个问题 强化学习原理 以Q learning算法为例 深度强化学习原理 以DQN DDQN算法为例 然后大概讲下DDQN算法 如何在更复杂的解锁任
  • OLED透明屏厚度:引领未来显示技术的革命

    OLED透明屏作为一种未来显示技术 其薄度在整个行业中具有重要意义 在这篇文章中 尼伽将详细介绍OLED透明屏厚度的优势 技术挑战以及应用案例 旨在为读者全面了解OLED透明屏的发展前景 一 OLED透明屏厚度的优势 OLED透明屏采用柔性
  • springboot项目中对文件夹进行监控

    需要的依赖
  • Quartz 基本使用

    Quartz 基本使用 一 Quartz的核心概念 二 Quartz的几个常用API 三 Quartz的使用 四 Quartz核心详解 五 JobListener 六 TriggerListener 七 SchedulerListener
  • 更改:为硬件保留的内存

    电脑 联想thinkbook16P 系统 win11 内存 16G 更改前 2 3G 更改后 827MB 一 关机 不同的型号电脑进入boss模式的按键不同 我的是按F1 自己去找进入boss模式的方式 二 进入boss模式 进入boss模
  • ARM运行可执行文件出现/usr/lib/libstdc++.so.6: version `CXXABI_ARM_1.3.3' not found解决

    1 关于Linux PC上出现这种问题容易解决 直接下载个高版本的libstdc so 6 0 x复制到 usr lib中 软连接一下就好了 ln s libstdc so 6 0 x libstdc so 6 2 但是在ARM板上执行可执
  • 1 映射与函数

    文章目录 集合 集合表示法 区间与领域 两个逻辑量词 映射 函数 函数的图形 反函数 集合 集合表示法 区间与领域 两个逻辑量词 映射 函数 函数的图形 反函数
  • JavaScript一种将数据库记录建立层级关系的处理方法

    JavaScript一种将数据库记录建立层级关系的处理方法 背景 方案 提示 背景 项目开展中 有些数据往往具有层级关系 在数据中用ID Parent来标示 那么在前端如何有效的还原这种层级关系 而其是很多层级的情况 方便的将数据加载的树