前端如何展示一个有上亿数据的树结构

需求描述

• 数据上亿，有数千个从属于根节点的一级子节点；
• 每个一级子节点有数个到数万个二级子节点；
• 二级子节点可能有三级子节点；
• 子节点的最多层深不定（即，也许可能有 10 层）；

需求分析

当面临一个树结构的时候，一般首先考虑用 tree 组件，但是，这里显然是不可能的，理由如下：

1. 数据量太多，一个节点可能有数万子节点，显示会非常卡（一般来说，最多显示几百个才能保证性能，超过 1000 很容易卡）；
2. 当多展开几个子节点后，很难找到自己需要的那个子节点；
3. 即使增加过滤/搜索功能，也不太方便；

因此我们修改思路，使用一个变相 tree 的显示模式，采用【面包屑】 + 【表格】的显示模式。核心思路是仿【linux文件树】的形式显示。

给一个 UI 设计的示例图：

点击 childA 子节点后，显示内容变换：

如上图示例，我们将一个上亿数据的树，转换为一个最多显示几万数据的表格。

但是几万条数据的表格，数据还是太多了，因此我们需要再次优化。

在不能直接分页的情况下，我们需要优化表格的显示效果。

具体方法是使用【虚拟滚动条】。

所谓虚拟滚动条，指滚动条为手动写的一个滚动条，而不是浏览器自带的真实的滚动条。但是实际使用体验和真实滚动条是一样的。（这个是一个很常见的需求，有不少 ui 组件可以提供此功能）

而加载的数据，并不是加载全部数据，而是像分页一样。

假如显示区域，最大显示数据为 50 条，那么设 50 条为一页，每次加载其前后各 5 页的数据（即500 条）。

举例来说，初始显示区域，我们可以认为是第一页，此时加载第 1 ~ 10 页数据（即排序第 1 ~ 500 的数据）。

当往下滚动或者拖动到第 10 页时，此时加载第 5 ~ 15 页的数据（即排序 250 ~ 750 的数据）。

于是超大量数据单页表格的展示问题也解决。

入参与出参

入参：（请求数据）

{
	startPage: 1,
	endPage: 10,
	pageSize: 50,
	parentId: 1
}

出参：（返回数据）

{
	pageInfo: {
		startPage: 1,
		endPage: 10,
		pageSize: 50,
		parentId: 1
	},
	data: [
		{
			id: 1,
			name: 'childA',
			parentId: 0,
		},
		// 更多数据....
	]
}

其他

如果觉得有所帮助，请点赞/关注，将鼓励我继续创作有价值的博文