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库。
当您显示大量项目并使用编辑、分组、过滤、排序或层次结构时,连续滚动非常适合。
入门指南
要启用连续滚动,请将scrollable.endless属性设置为true。
注意:为了使功能正常工作,有两个要求:
需要一个垂直滚动条
网格的高度应恒定
当网格绑定到本地和远程数据时,它们都支持连续滚动:
当绑定到本地数据数组时,网格会将所有项目序列化到客户端,并且在用户滚动时,小部件将显示新项目。
当绑定到远程数据时,网格仅将一页的项目序列化。 当用户滚动到列表的末尾时,网格将发送AJAX请求以获取下一页的项目。返回数据后,网格仅呈现新项目并将其追加到旧项目。
$(“#grid”).kendoGrid({
scrollable: {
endless: true
},
// Other configuration.
});
与编辑一起使用
与常规分页一样,连续滚动与编辑方式相似,但是当您与编辑一起使用连续滚动并打开一个项目进行编辑时,即使在请求新页面之后,该项目仍将保持打开状态。
与分组一起使用
开箱即用,连续滚动与分组一起工作,但是当两个功能一起使用时,网格将以以下特定方式运行:
如果将网格滚动到底部,它将请求的项目数将等于项目数和页面大小。
如果最后一组项目被折叠,则网格仍将请求该组中的项目。
如果一组项目跨越多个页面,则网格将发出多个请求。
当返回特定的项目子集时,这些项目将被渲染和隐藏,因为该组已折叠。 网格将继续请求这些项目,直到到达新的组或直到不存在任何要请求的项目为止。
如果网格绑定到远程数据,请启用serverGrouping将分组应用于所有项目。
与层次结构一起使用
如果网格显示层次结构数据并且展开了某个项目,则在滚动这些项目并请求新页面时,该网格不会折叠。
注意:筛选、排序和分组操作将重置滚动位置。