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

骑猪看日落 2022-12-04 09:14 170阅读 0赞

## 需求描述 ##

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

## 需求分析 ##

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

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

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

给一个 UI 设计的示例图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMjAwMDQ2MDQ_size_16_color_FFFFFF_t_70_pic_center]  
点击 childA 子节点后，显示内容变换：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMjAwMDQ2MDQ_size_16_color_FFFFFF_t_70_pic_center 1]  
如上图示例，我们将一个上亿数据的树，转换为一个最多显示几万数据的表格。

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

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

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

所谓虚拟滚动条，指滚动条为手动写的一个滚动条，而不是浏览器自带的真实的滚动条。但是实际使用体验和真实滚动条是一样的。（这个是一个很常见的需求，有不少 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,
    		},
    		// 更多数据....
    	]
    }

## 其他 ##

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMjAwMDQ2MDQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/bec0cd09b1fd47fb9a831736124605dc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMjAwMDQ2MDQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/4f06f53c8e09420b94bcc4acf6c563e2.png