问题 html上的10,000 +记录可以快速呈现


现在这将是一个非常荒谬的问题。但我能做什么,这是客户的要求。基本上,我们有一个网格(主 - 细节类型),可以达到大约1.5万多行(有可能在几年内达到30-50万行)。

我的客户端不需要任何分页,也不希望任何数据被裁剪。此外,他并没有完全使用最新的硬件,因此在浏览器上渲染是一个大问题。他希望通过在浏览器上打印或查看所有内容来查看所有内容。 (你们可能都认为这听起来多么疯狂,而且肯定是这样)。

现在我想通过快速渲染html来解决这个问题。目前它的一个简单的asp.net网格视图没有分页。这基本上呈现HTML表格。我认为我的选择是:   - 使用div手动渲染html(用于快速加载)   - 将其导出为pdf或excel(有没有办法导出而无需诉诸第三方控件?)   - 给手指(给客户:D j / k)

总结一下,最好的方法是在html上显示10,000多个数据记录?


6673
2018-03-20 08:34


起源

你有选项,使用Nustache将对象渲染为html,然后追加到容器,使用YUI数据表,最后你可以使用Backbone.js委托渐进式加载类型表,当你滚动时将加载更多的行或点击加载更多按钮 - Deeptechtons
长 表 因为(较旧的)浏览器需要在开始布局页面之前读取整个表格,所以可能会很慢。也许非表解决方案可以更好地工作。 - Hans Kesting
你必须考虑如果你提供给客户的任何解决方案都会对结果感到满意,我会更倾向于使用通用UI控件来模拟演示,并让客户看到他应该期待的那种糟糕的用户体验,否则你的声誉可能会受到影响,这对于不切实际的期望是不值得的。 - Lloyd
@deeptechtons:非常感谢你的建议。我试过这个,模板肯定有帮助,但是在渐进式加载问题上,有点不安,因为它有时会失败。 - xeshu
@Hans Kesting:你是对的,长表在页面渲染上有这个问题,我考虑使用div作为替代,但是由于数据是网格形式(典型的行/单元格类型),创建div只需要更长的时间,没有对两者进行性能测试,所以不确定使用div会获得多少好处.. - xeshu


答案:


考虑使用“滚动” Datatables的插件..

作为DataTables 1.8的一部分,发布了一个名为“Scroller”的新插件   作为下载包的一部分介绍。 Scroller是一个   为DataTables实现虚拟滚动,它提供了一个   垂直滚动表,滚动表的整个高度,   但只绘制可见显示所需的行,   导致业绩大幅增长。这非常令人兴奋   DataTables的插件不仅可以提高性能,还可以提高性能   因为它有效地提供了与表的新用户交互,   允许完全滚动非常大的数据集。


7
2018-03-20 08:39



谢谢那个伙伴:)现在调查一下。干杯 - xeshu
好的祝你好运.. - Lloyd


他希望通过打印来查看所有内容

这是查看所有信息的唯一可行解决方案。 PDF或Excel是 许多 更好地处理大量行。

进行渲染非常简单。只需设置excel mime类型并返回HTML表。

http://www.designdetector.com/archives/05/07/HTMLToExcelTheEasyWay.php

说到PDF,您可能必须使用像PDFSharp这样的外部库。


2
2018-03-20 08:46



干杯jgauffin。 :)我一直在研究pdfsharp和其他开源pdf生成器。没有实现简单的表结构,切换mime类型在excel中打开它。感谢那 :) - xeshu


您应该进行分页 - 这并不意味着您一次只需要显示一页数据,而是应该一次检索并呈现一页数据(并且一个接一个地继续提取页面直到数据完成) 。

例如,在初始请求中从服务器发送第一页数据。设置js计时器并使用AJAX请求检索后续数据页并将其加载到浏览器中。您可以同时进行多个(比如3-4个)AJAX请求以检索页面 - 只有在这种方法中才能正确地实现排序。

我将亲自避免网格视图并使用手动java脚本(有jquery的帮助)渲染html表或使用一些java脚本模板引擎。我将使用JSON从服务器检索数据。


2
2018-03-20 08:37



他说他无法根据客户要求实施寻呼。 - TheBoyan
@BojanSkrchevski,客户希望一次查看所有数据,而不是一次查看页面。请仔细阅读答案 - 我建议分页检索和显示数据,即你继续使用计时器加载一页数据。 - VinayC
啊,对不起,+1 :) - TheBoyan
感谢您的快速回复,VinnaC。 :)进步加载绝对是前进的方向,但是之前我没有玩过很多东西,而且它似乎有时会遇到不同浏览器的问题,而且由于我们客户的机器是古老的石器时代浏览器,你永远都不知道AJAX和javascript只是放弃了。 - xeshu


我知道这差不多晚了一年,但万一它可以帮助别人。

使用 SlickGrid  - 它使用div而不是表格,这在IE中提供了更多的性能。检查一下


1
2018-02-06 05:30