点击“了解更多”获取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;}

恢复滚动位置

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

将滚动位置保存在dataBinding事件中。恢复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));