Web界面开发工具！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;
}

恢复滚动位置

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

将滚动位置保存在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));

来源：oschina

链接：https://my.oschina.net/u/3992677/blog/4268268

标签

kgrid

scrollable