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

原创|使用教程|编辑:龚雪|2020-04-30 09:45:45.963|阅读 27 次

概述:Kendo UI for jQuery是创建现代Web应用程序的最完整UI库,本文主要为大家介绍如何实现滚动操作。

# 您正在找协同办公软件吗?点击这里站长给您推荐 #

相关链接:

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

Kendo UI目前最新提供Kendo UI for jQueryKendo UI for AngularKendo UI Support for ReactKendo 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));


了解最新Kendo UI最新资讯,请关注Telerik中文网!

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

慧聚IT微信公众号


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果

文章转载自:慧都网

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
title
相关厂商
相关产品
Kendo UI

全新升级的Kendo UI,是创建数据丰富的Web应用程序的最完整UI库。

Kendo UI for jQuery

完整的jQuery UI组件库,可快速构建出色的高性能响应式Web应用程序。

在线
客服
咨询
电话
400-700-1020
在线
QQ
购物车 反馈 返回
顶部
在线客服系统
live chat