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个)的项目使用虚拟滚动没有多大意义。触摸设备上的虚拟滚动依赖于拖放事件,该事件比本地滚动要慢。 这可能会导致性能问题。
已知局限性
注意:当不支持或不建议使用虚拟滚动时,取决于数据项的数量,请恢复为标准分页,或者恢复为不进行分页的非虚拟滚动。
?
当网格可导航时,键盘导航仅支持向上箭头键和向下箭头键,不支持Page Up和Page Down键滚动。
通过使用以下示例,新的persistSelection可以与单选功能一起使用。不建议使用多重选择功能,因为发生滚动时会从DOM中删除旧页面。 这可能会破坏选择,因为滚动到达新页面后DOM元素不存在。
京ICP备09015132号-996 | 网络文化经营许可证京网文[2017]4225-497号 | 违法和不良信息举报电话:4006561155
© Copyright 2000-2023 北京哲想软件有限公司版权所有 | 地址:北京市海淀区西三环北路50号豪柏大厦C2座11层1105室