010-68421378
sales@cogitosoft.com
当前您所在的位置:首页>新闻中心>新品发布

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

发布时间:2020/10/01 浏览量:1951
虚拟滚动是分页的替代方法

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滚动条,当数据行必须手动滚动到特定位置时,该滚动条会影响方案。

 

 
 

 
 

 

 

当用户以其虚拟滚动模式滚动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元素不存在。

下一篇:新版本:使用Data Masker 7.1自动化您的数据保护流程
上一篇:鲁班排布 | Luban Arrangement:支持鲁班算量LBIM与revit模型导入

                               

 京ICP备09015132号-996网络文化经营许可证京网文[2017]4225-497号 | 违法和不良信息举报电话:4006561155

                                   © Copyright 2000-2023 北京哲想软件有限公司版权所有 | 地址:北京市海淀区西三环北路50号豪柏大厦C2座11层1105室

                         北京哲想软件集团旗下网站:哲想软件 | 哲想动画

                            华滋生物