Kendo UI/Telerik全栈开发组件推荐,轻松构建交互式现代UI应用
当前位置: 首页 > 使用教程

Kendo UI for jQuery数据管理使用教程:虚拟滚动

发布时间:2020-05-09

Kendo UI for jQuery R1 2020 SP2试用版下载

Kendo UI目前最新提供Kendo UI for jQueryKendo UI for AngularKendo UI Support for ReactKendo 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元素不存在。

了解最新Kendo UI最新资讯,请关注Telerik中文网!

扫描关注慧聚IT微信公众号,及时获取最新动态及最新资讯

慧聚IT微信公众号
在线
客服
在线
QQ
电话
咨询
400-700-1020
返回
顶部