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

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

提示

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值