我仅使用<div>
而不是<table>
使用React.js在Web浏览器中构建类似于Excel的表。列数约为90,行数约为24000。
我们知道,由于性能问题,不可能在单个网页上将整个数据加载到HTML中。因此,我决定使用滚动向用户显示部分数据。
主要概念很简单,在用户视口附近构建HTML。猜测用户是否在单个视口中看到第1800至1900个数据。我只会将大约1750〜1950年的数据加载到HTML中。如果用户向上滚动,我将为第1700〜1750个数据加载HTML,并删除第1900〜1950个数据。
我想我需要手动操纵滚动偏移量才能获得用户所在的位置。如果每行的高度等于40像素,并且视口的高度为1000像素,那么用户将在单个视口中看到25个项目,因此我需要加载约25(前)+ 25(当前正在查看)+ 25(结束)数据,如果用户向上或向下,我将加载其他数据并删除远离用户的数据。
但是,我发现对我的表的要求与这种情况不匹配。这是我的情况。
首先,每一行的高度都不相同。基本上,我的表格会将一行显示为一行。我的意思是,表单行可以如下所示,
| Photo| ProductName | Size Pool | Stock |
.... // Below are single row
+------+---------------+-------------------+------------+
| | Boots | 110-120 | 24 | // Row header (Shows Summary of child row)
+ +---------------+-------------------+------------+
| | Boots | 110 | 16 | // Row's row #1
+ +---------------+-------------------+------------+
| | Boots | 120 | 8 | // Row's row #2
+------+------------------------------------------------+
...
+------+---------------+-------------------+------------+
| |Leather Shoe | 120 | 8 | // Row can come with no header row, only single
+------+---------------+-------------------+------------+
...
如上所述,如果产品具有两个以上的选项,则它将合并成单行,并显示摘要标题。如果不是选件产品,则仅显示其行。如果行内的内容很大,它将延伸以适合其中的内容所有数据均来自远程数据库,该数据库通过REST API检索数据。
数据库方案如下,以2表为例。
Table #1 ProductInfo
+--------------+------------+------------+-----------+
| GroupNumber |ProductName | Size | Stock |
+--------------+------------+------------+-----------+
| 1 | Boots | 110 | 16 |
+--------------+------------+------------+-----------+
| 1 | Boots | 120 | 8 |
+--------------+------------+------------+-----------+
| 2 |Leather Shoe| 120 | 8 |
+--------------+------------+------------+-----------+
Table #2 GroupInfo
+-----------+------------+--------------+
|GroupNumber| SizePool | ImageURL |
+-----------+------------+--------------+
| 1 | 110-120 | https://abc |
+-----------+------------+--------------+
| 2 | 120 | https://def |
+-----------+------------+--------------+
并且将来的要求在下面,(并且大多数都已实现)
按每列排序,按多行,按行或按行排序(通过SQL处理)
按表达式过滤数据(由客户端处理)
隐藏,调整大小,更改列的顺序(由客户端处理)
单元内部的可交互组件,如DatePicker,弹出窗口等(由客户端处理)
我成功使用基于页面的方法创建了这样的表。但是我需要滚动视口表。该表包含许多因数值列,例如总和,平均值,除非有特殊原因(例如性能),否则它们不存储在数据库中。 (它们中的大多数由DB View或Procedure处理,包括排序,计算等)。因此,总体性能非常重要。
我考虑了一些问题和解决方法,您可以检查一下并给我建议吗?
[<ProductInfo>,...]
和[<GroupInfo>,...]
{ group:<GroupINfo>, values:[<ProductInfo>,...] }
在典型情况下,哪种情况下对性能更好?{ group:<GroupINfo>, values:[<ProductInfo>,...] }
之类的数据,性能是否存在问题?[<ProductInfo>,...]
和[<GroupInfo>,...]
之类的数据,我确信上述查询的性能足以进行裁剪。但是我认为以后一个更好。因此,如果可能,我需要更改界面。我考虑过使用无限滚动,但这不是我的情况,我需要同时执行加载数据和删除数据。但是无限滚动似乎不支持从视口中删除数据。行高不一致也可能是一个问题。
我发现反应虚拟化了,并且可以正常工作。它还支持行的动态调整大小,它极大地帮助了