Kendo UI for jQuery数据管理使用教程：滚动概述

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

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表进行JavaScript或CSS更新时，这两个表很重要。

<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">
<table>...</table>
</div>
</div>

以下示例通过虚拟滚动展示Grid中的HTML输出。

<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>
</div>

 但是，为了通过辅助技术实现最大程度的可访问性，请禁用Grid的滚动功能。 要禁用滚动，请将scrollable选项设置为false。

$("#grid").kendoGrid({
scrollable: false,
// other configuration
});

设置滚动条

默认情况下，启用滚动时，网格不显示滚动条。 要渲染滚动条并实现垂直或水平滚动，请定义网格的以下尺寸，您可以独立控制垂直和水平滚动。

• 要实现垂直滚动，请设置网格的高度。 否则，它将垂直扩展来显示所有行。
• 要实现水平滚动，请以像素为单位明确定义所有列的宽度，并确保它们的总和超过Grid的宽度。

启用滚动后，即使不需要网格的垂直滚动条也始终可见，这简化了实现并提高了小部件的性能。要删除垂直滚动条，请使用CSS规则，并确保Grid及其数据区域均未应用固定的高度，以便它们能够根据表行数进行收缩和扩展。 在下面的示例中，＃GridID仅允许将样式应用到特定的Grid实例。 要在所有Grid实例中使用这些样式，请将ID替换为.k-grid CSS类。

#GridID .k-grid-header
{
padding: 0 !important;
}

#GridID .k-grid-content
{
overflow-y: visible;
}

恢复滚动位置

在某些情况下，小部件反弹时，可能会重置网格的滚动位置。 为防止滚动位置恢复：

1. 将滚动位置保存在dataBinding事件中。
2. 恢复databound事件中的滚动位置。

可滚动容器是div.k-grid-content，可以将其作为小部件包装的子元素来检索。 如果启用了虚拟滚动，则可滚动数据容器为div.k-virtual-scrollable-wrap，并且仅水平滚动。

$(function () {
// Initialize the variable which will hold the scroll positions.
var scrollOffset = {
left: 0,
top: 0
};

// Save the scroll position before the new data is rendered.
function onGridDataBinding (e) {
var container = e.sender.wrapper.children(".k-grid-content"); // or ".k-virtual-scrollable-wrap"
scrollOffset.left = container.scrollLeft();
scrollOffset.top = container.scrollTop(); // use only if virtual scrolling is disabled
}

// Restore the scroll position after the new data is rendered.
function onGridDataBound (e) {
var container = e.sender.wrapper.children(".k-grid-content"); // or ".k-virtual-scrollable-wrap"
container.scrollLeft(scrollOffset.left);
container.scrollTop(scrollOffset.top); // use only if virtual scrolling is disabled
}

// Attach the Grid event handlers.
$("#grid").kendoGrid({
dataBinding: onGridDataBinding,
dataBound: onGridDataBound
// ...the rest of the code is omitted for brevity...
});
});

缩放时调整滚动条和页面布局

缩放网页时，浏览器会更改除滚动条以外的所有页面的内容大小，这会导致启用滚动功能的网格中的标题和数据区域之间未对齐。 要调整布局，请在window.resize上执行以下代码。

注意：如果网格处于从右到左（RTL）模式，请使用“ padding-left”而不是“ padding-right”配置。

var grid = $('#GridID').data('kendoGrid');
grid.thead.closest(".k-grid-header").css("padding-right", kendo.support.scrollbar(true));

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