我在选项卡中向用户显示了许多大表,每个选项卡有一个表。这些表可以变得很大,导致速度问题,最多可以有5000行和100列。当表格变得很大时,在标签之间切换和在表格中滚动变得很慢。所以我正在寻找加快查看表格内容的方法。以下是有关页面设置的其他一些信息;我发布了一个例子,但我没有一个可以发布的例子。
我在表上实现了一个标题/行锁,以便每行中的thead和前4列始终可见,因为之前所做的事情没有滚动锁并查看表的大部分内容没有意义,因为你不知道你在看什么;鉴定细胞不再可见。
对于我正在查看的大多数数据集都没有任何问题,但是当表格达到上述大小时,只是试图滚动表格,浏览器需要几秒钟才能赶上。我猜测浏览器不喜欢页面上的内容量,所以我试图想出一个加快速度的好方法。
我已经从我最初的想法中做了很多关于页面的事情,因为它之前的速度更慢。我已经通过在PHP中构造“锁定”表而不是尝试动态转换常规表来减轻Javascript的大部分负担,这有很大帮助。我现在在Javascript中做的唯一事情是对每个表进行ajax调用,将返回的html代码附加到页面,必要时调整表的div容器大小,并设置滚动触发器以使固定的标题和固定的边与内容一起滚动,我认为此时我可以脱掉Javascript引擎。
我认为为表格实现一些虚拟滚动或分页可能会有所帮助,但我不确定如何自己实现它。我发现了许多具有这些功能的东西,但没有我需要的滚动锁,所以我认为我不会得到那些已经在那里使用的东西。 (即使每页'显示的行数较少,我也想不出办法绕过大约100列的事实)。我认为,不仅仅是从PHP脚本发送表格的html,我可以发送一个每个索引有一行HTML的数组。然后,当我加载页面时,我可以加入数组的相关部分,删除以前显示的部分,并将加入的HTML代码转储到页面。这样每页只有一个.append更改。但在我开始尝试实现类似的东西之前,却发现它并没有真正帮助,它会导致其他问题,等等,我认为我应该得到其他想法或建议。
答案 0 :(得分:2)
在我看来,你试图找到一个错误提出问题的技术解决方案。
让我们分析一下你的问题。如果您有一个包含大约50,000个单元格(5,000行和100个单元格)的表,如果用错误的方式向用户显示所有信息。
首先,没有显示能够一次显示信息。放置一个HTML页面的所有信息并在浏览器中滚动不是更好,例如关于分页按钮的分页。从用户的角度来看,具有小尺寸的HTML页面将在很多时候改善性能。
另一个重要的一点是,用户无法感知来自50,000个单元格的所有信息。用户分析信息。在单元格或行中使用背景颜色可以改善用户体验(例如,查看here)。使用here或here等其他控件有助于减少需要显示的列数,并帮助用户快速分析信息。
此外,您应该为用户提供基于某些过滤器显示信息子集并按特殊顺序对其进行排序的可能性。请参阅工具栏过滤here或搜索对话框here的示例。在搜索字段中,您可以使用jQuery UI自动完成或其他有助于用户的控件。您还可以在表格中添加一些特定于您的问题的附加控件,以帮助用户设置更多特定于问题的过滤器。
因此,您应该考虑数据过滤的方式,这可能更适合您的情况。可能需要显示的信息可以更好地表示为树,具有子网格的网格或仅使用两个网格(主网格和另一网格,其中包含在主网格中选择的项目的详细信息)。可能数据分组是用户需要的。例如,请查看the jqGrid demo page,并考虑用于您的问题的用户界面的更多不同可能性。
答案 1 :(得分:1)
我们也遇到过这样的问题,为了更好地管理网格,我们已经从.net或infragistics网格转移到了jqgrid。
您还可以在以下位置查看演示。
答案 2 :(得分:0)
我会看一下SlickGrid:
https://github.com/mleibman/SlickGrid/wiki
它能够使用AJAX从Web服务加载数据。这样,您只需要一次实际呈现一定数量的行。祝你好好找到任何好文件......
答案 3 :(得分:0)
老实说,我没有读完所有内容:) 但我认为有两种解决方案:在滚动时分页或“动态加载”行,两个解决方案都使用ajax
答案 4 :(得分:0)
和圣地亚哥一样 - 我也没有读完整件事,
但如果我得到它的要点,我建议jqGrid,它是专门为处理大量数据而设计的。
我不是100%确定如何处理大量列,但我建议尝试一下。