Web界面开发工具!Kendo UI for jQuery数据管理:虚拟滚动

点击“了解更多”获取Kendo UI for jQuery R1 2020 SP2试用版下载

Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。

虚拟滚动是分页的替代方法。

入门指南

启用虚拟滚动后，当用户垂直滚动时，网格将从其远程数据源加载数据。

$("#grid").kendoGrid({
scrollable: {
virtual: true
},
// Other configuration.
});

在虚拟滚动中，HTML输出与标准滚动功能不同——网格的数据表未放置在可滚动容器内。 滚动条属于单独的div.k滚动条，当数据行必须手动滚动到特定位置时，该滚动条会影响方案。

<div class="k-widget k-grid">
<div class="k-grid-header">
<div class="k-grid-header-wrap">
<table>...</table>
</div>
</div>
<div class="k-grid-content">
<div class="k-virtual-scrollable-wrap">
<table>...</table>
</div>
<div class="k-scrollbar k-scrollbar-vertical">
...<!-- div elements which generate a scrollbar -->...
</div>
</div>
</div>

当用户以其虚拟滚动模式滚动Grid时，Grid会动态显示到达的滚动位置的表行。 如果Gris使用本地数据，或者它的远程数据已被加载和缓存，则小部件的呈现速度和性能取决于：

• 页面大小
• 网格高度
• 滚动速度
• 数据项总数

如果项目总数很大并且滚动速度很快，则可以频繁地重新渲染网格表。 另外，如果页面大小很大，则用户可能会发现滚动平滑的问题。 在这种情况下，请减小页面大小并增加网格高度来提高滚动性能。

设置滚动条

虚拟滚动依赖于伪造的滚动条，它的大小不是由浏览器确定的，而是根据已经加载的数据平均行高来计算的。 如此一来行高度可变可能会导致意外的操作，例如无法滚动到最后一页上的最后一行。 为确保所有表行都具有相同的高度，请使用以下任一选项：

• 禁用自动换行
• 设置一个明确的、足够大的行高，如以下示例所示。

.k-virtual-scrollable-wrap tr
{
height: 3em;
}

// Or

.k-virtual-scrollable-wrap td
{
white-space: nowrap;
}

在手机上使用

在看不到可以抓取和拖动滚动条的移动设备上，大量数据项（例如数千个）的虚拟滚动可能会妨碍对所有表行的轻松访问，因为大量数据项将需要大量的数据。另一方面，对数量很少（例如少于200个）的项目使用虚拟滚动没有多大意义。 触摸设备上的虚拟滚动依赖于拖放事件，该事件比本地滚动要慢。 这可能会导致性能问题。

已知局限性

注意：当不支持或不建议使用虚拟滚动时，取决于数据项的数量，请恢复为标准分页，或者恢复为不进行分页的非虚拟滚动。

• 启用虚拟滚动或分页， 不要同时应用两个功能。
• 虚拟滚动与分组和层次结构不兼容，从R3 2017开始支持编辑。
• 虚拟滚动依赖于根据已加载的数据计算平均行高，行高变化很大或未绑定到数据的行数未知（例如组标题）可能会导致意外操作。
• 提供足够大的网格页面大小，以便表行不适合可滚动数据区域。 否则，将不会创建垂直虚拟滚动条，网格的页面大小必须大于数据区域中可见表行数的三倍以上。
• 初始化时需要显示具有设置高度的可滚动Grid。 通过这种方式，网格可以根据小部件的总高度来调整其可滚动数据区域的高度。 在某些情况下，初始化时Grid可能是不可见的——例如，放置在最初不激活的TabStrip标签或另一个小部件中时，在这种情况下请使用以下任一选项：在其元素仍然可见的情况下初始化Grid。在父窗口小部件的适当事件中初始化网格——例如，在TabStrip的Activate事件中。
• 由于与高度相关的浏览器限制（无法避免），虚拟滚动最多可以处理一百万个记录，确切的记录数取决于浏览器和行高。 如果您使用的行数大于浏览器无法处理的行数，则可能会发生意外的窗口小部件操作或JavaScript错误。 在这种情况下，请还原为标准分页。
• 在虚拟模式下刷新或替换Grid数据时，必须将虚拟滚动条的位置重置为零，例如，使用$('#GridID .k-scrollbar').scrollTop(0);。在某些情况下，您可能还需要调用refresh（）方法。
• 启用虚拟滚动时，不支持以编程方式滚动到特定的Grid行，因为无法可靠地预测该行的确切滚动偏移量。
• 当网格可导航时，键盘导航仅支持向上箭头键和向下箭头键，不支持Page Up和Page Down键滚动。
• 通过使用以下示例，新的persistSelection可以与单选功能一起使用。不建议使用多重选择功能，因为发生滚动时会从DOM中删除旧页面。 这可能会破坏选择，因为滚动到达新页面后DOM元素不存在。