Kendo UI for jQuery数据管理使用教程：连续滚动

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将分组应用于所有项目。

 

与层次结构一起使用

如果网格显示层次结构数据并且展开了某个项目，则在滚动这些项目并请求新页面时，该网格不会折叠。

注意：筛选、排序和分组操作将重置滚动位置。