我需要呈现大量的行数据(即。数百万行)在一个网格中使用JavaScript传递给用户。
用户不应该一次只查看页面或有限数量的数据。
相反,应该显示所有数据都是可用的。
不同于一次性下载所有数据,小块数据是在用户访问它们时下载的。通过滚动网格)。
行不会通过前端进行编辑,因此只读网格是可以接受的。
对于这种无缝分页,存在哪些用JavaScript编写的数据网格?
我需要呈现大量的行数据(即。数百万行)在一个网格中使用JavaScript传递给用户。
用户不应该一次只查看页面或有限数量的数据。
相反,应该显示所有数据都是可用的。
不同于一次性下载所有数据,小块数据是在用户访问它们时下载的。通过滚动网格)。
行不会通过前端进行编辑,因此只读网格是可以接受的。
对于这种无缝分页,存在哪些用JavaScript编写的数据网格?
当前回答
我建议你读一读
http://www.sitepen.com/blog/2008/11/21/effective-use-of-jsonreststore-referencing-lazy-loading-and-more/
其他回答
在我看来,最好的网格如下:
Flexigrid: http://flexigrid.info/ jQuery网格:http://www.trirand.com/blog/ jqGridView: http://plugins.jquery.com/project/jqGridView jqxGrid: https://www.jqwidgets.com/ 英格丽德:http://reconstrukt.com/ingrid/ SlickGrid http://github.com/mleibman/SlickGrid
datatable http://www.datatables.net/index
屏蔽 http://demos.shieldui.com/web/grid-virtualization/performance-1mil-rows 智能电网 https://www.htmlelements.com/demos/grid/overview/
我最好的3个选择是jqGrid, jqxGrid和DataTables。它们可以处理数千行数据并支持虚拟化。
看看dGrid:
https://dgrid.io/
我同意用户永远不需要同时查看数百万行数据,但是dGrid可以快速显示它们(一次显示一整屏)。
不要把海洋烧开来泡一杯茶。
datagrid提供了数据的JS抽象,因此您可以使用所提供的dojo将其连接到各种后端。数据存储或自己编写。显然,您需要一个支持对这么多记录进行随机访问的系统。DataGrid还提供了完全的可访问性。
请编辑,这里有一个指向Matthew Russell文章的链接,该文章应该会提供您所需要的示例,使用dojox.grid查看数百万条记录。注意,它使用了旧版本的网格,但概念是相同的,只是有一些不兼容的API改进。
哦,它是完全免费的开源软件。
免责声明:我大量使用YUI DataTable很长一段时间没有头痛。它强大而稳定。根据您的需要,您可以使用支持ScrollingDataTable
x-scrolling y-scrolling xy-scrolling 强大的事件机制
对于你所需要的,我认为你想要的是一个tableScrollEvent。它的API说
当固定滚动数据表具有滚动时触发。
由于每个数据表都使用一个数据源,您可以通过tableScrollEvent以及呈现循环大小来监视其数据,以便根据需要填充ScrollingDataTable。
渲染循环大小表示
如果您的DataTable需要显示一个非常大的数据集的全部,renderLoopSize配置可以帮助管理浏览器DOM呈现,这样UI线程就不会被锁定在非常大的表上。任何大于0的值都将导致DOM呈现在setTimeout()链中执行,该链在每个循环中呈现指定的行数。理想值应该在每个实现中确定,因为没有硬性的规则,只有一般的指导方针:
By default renderLoopSize is 0, so all rows are rendered in a single loop. A renderLoopSize > 0 adds overhead so use thoughtfully. If your set of data is large enough (number of rows X number of Columns X formatting complexity) that users experience latency in the visual rendering and/or it causes the script to hang, consider setting a renderLoopSize. A renderLoopSize under 50 probably isn't worth it. A renderLoopSize > 100 is probably better. A data set is probably not considered large enough unless it has hundreds and hundreds of rows. Having a renderLoopSize > 0 and < total rows does cause the table to be rendered in one loop (same as renderLoopSize = 0) but it also triggers functionality such as post-render row striping to be handled from a separate setTimeout thread.
例如
// Render 100 rows per loop
var dt = new YAHOO.widget.DataTable(<WHICH_DIV_WILL_STORE_YOUR_DATATABLE>, <HOW YOUR_TABLE_IS STRUCTURED>, <WHERE_DOES_THE_DATA_COME_FROM>, {
renderLoopSize:100
});
<WHERE_DOES_THE_DATA_COME_FROM>只是一个单一数据源。它可以是JSON、JSFunction、XML甚至单个HTML元素
在这里你可以看到一个简单的教程,由我提供。注意,没有其他DATA_TABLE插件同时支持单点和双击。YUI DataTable允许您。更重要的是,你甚至可以在JQuery中使用它而不会感到头疼
你可以看到一些例子
列表项
请随意询问关于YUI DataTable的任何其他问题。
问候,
我推荐带有Buffered View特性的Ext JS Grid。
http://www.extjs.com/deploy/dev/examples/grid/buffer.html