需求描述
- 数据上亿,有数千个从属于根节点的一级子节点;
- 每个一级子节点有数个到数万个二级子节点;
- 二级子节点可能有三级子节点;
- 子节点的最多层深不定(即,也许可能有 10 层);
需求分析
当面临一个树结构的时候,一般首先考虑用 tree 组件,但是,这里显然是不可能的,理由如下:
- 数据量太多,一个节点可能有数万子节点,显示会非常卡(一般来说,最多显示几百个才能保证性能,超过 1000 很容易卡);
- 当多展开几个子节点后,很难找到自己需要的那个子节点;
- 即使增加过滤/搜索功能,也不太方便;
因此我们修改思路,使用一个变相 tree 的显示模式,采用【面包屑】 + 【表格】的显示模式。核心思路是仿【linux文件树】的形式显示。
给一个 UI 设计的示例图:
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiclRnblN2XjlGcjAzNfRHLGZkRGZkRfJ3bs92YsYTMfVmepNHL9EFRNJTUE10dBpWT4Z0MMBjVtJWd0ckW65UbM5WOHJWa5kHT20ESjBjUIF2X0hXZ0xCMx81dvRWYoNHLrdEZwZ1Rh5WNXp1bwNjW1ZUba9VZwlHdssmch1mclRXY39CXldWYtlWPzNXZj9mcw1ycz9WL49zZuBnL4cTO2EDO0YTM3ATOwAjMwIzLc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
点击 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,
},
// 更多数据....
]
}
其他
如果觉得有所帮助,请点赞/关注,将鼓励我继续创作有价值的博文