Kendo UI for jQuery数据管理使用教程:网格高度

翻译|使用教程|编辑:龚雪|2020-08-21 10:34:37.080|阅读 23 次

概述:Kendo UI for jQuery是创建现代Web应用程序的最完整UI库,本文介绍Kendo UI Grid支持网格高度,欢迎下载新版体验。

# 正版采购狂欢节,企业采购正当时 # # 31款JAVA开发必备控件和工具 #

相关链接:

Kendo UI for jQuery R2 2020 SP1试用版下载

Kendo UI目前最新提供Kendo UI for jQueryKendo UI for AngularKendo UI Support for ReactKendo UI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。

Height

默认情况下,Grid没有设置高度,并且会扩展来适合所有表格行。

入门指南

注意:仅在启用滚动时将高度设置为Grid。

若要设置网格的高度,请使用以下任一方法:

  • 将内联高度样式应用于从中初始化Grid的“div”。
  • 使用窗口小部件的height属性,该属性将内联样式应用于Grid wrapper—与上一个选项相同。
  • 使用外部CSS,例如使用ID或.k-grid CSS类应用高度样式。

设置网格的高度后,它将计算其可滚动数据区域的适当高度,以使标题行、过滤器行、数据、页脚和pager的综合等于小部件的预期高度。这就是为什么如果在创建窗口小部件后通过JavaScript更改网格的高度,则必须随后调用resize方法。 通过这种方式,Grid可以重新计算其数据区域的高度。

在特定情况下,您可以使用JavaScript或作为div.k-grid-content元素的外部CSS将高度样式设置为可滚动数据区域。 在这种情况下,请避免为Grid设置高度。

图1:启用固定高度和滚动功能的网格

Kendo UI for jQuery数据管理使用教程

设定最小高度

注意:启用虚拟滚动时不适用。

您可以使Grid根据其行数并在一定范围内垂直扩展和收缩,为此请将最大和/或最大高度样式应用于可滚动数据区域,并且不要设置网格的任何高度。如果使用网格的MVC wrapper,请删除默认的数据区域高度。除GridID,您还可以使用.k-grid类来定位所有小部件实例。

#GridID .k-grid-content
{
min-height: 100px;
max-height: 400px;
}

启用自动调整大小

注意:仅适用于可滚动网格。

1. 要允许Grid及其父级调整大小,请将高度为100%的样式应用于小部件的<div class =“ k-grid”> wrapper。根据web标准,将百分比设置高度的元素要求明确设置其父代的高度。递归地应用此要求,直到达到像素高度的元素或html元素为止。 高度为100%的元素不能具有边距、填充、边框或同级元素,这就是为什么您还必须删除网格的默认边框的原因。

2. 确保Grid内部布局适应“div”wrapper高度的变化,如果这些更改由调整浏览器窗口的大小触发的,请订阅浏览器的窗口调整大小事件并执行Grid的resize方法。 调整大小方法将测量Grid “div”的高度,并调整可滚动数据区域的高度。

  • 如果将Grid放置在Kendo UI Splitter或Kendo UI窗口中,则无需调用resize方法,因为这些小部件将自动执行它。 另外,如果使用锁定列,则不必应用该方法。
  • 如果可用于Grid的垂直空间取决于布局的自定义大小调整(由用户控制),请使用与布局更改有关的合适事件或方法来执行Grid的调整大小方法。 在这种情况下,即使您使用锁定的列,也要调用resize方法。

在Kendo UI Q3 2013版本之后,resize方法适用于Kendo UI版本。 对于早期版本不是调整大小,请使用以下方法,该方法实际上以相同的方式起作用。

$(window).resize(function() {
var gridElement = $("#GridID"),
newHeight = gridElement.innerHeight(),
otherElements = gridElement.children().not(".k-grid-content"),
otherElementsHeight = 0;

otherElements.each(function(){
otherElementsHeight += $(this).outerHeight();
});

gridElement.children(".k-grid-content").height(newHeight - otherElementsHeight);
});

配置加载指示器

在内部,Grid使用kendo.ui.progress方法在远程读取请求期间显示加载叠加。 如果禁用滚动,则覆盖图会显示在整个网格上。 如果启用了滚动,则覆盖图将显示在可滚动数据区域上。 如果启用了滚动并且Grid没有设置高度,则数据区域最初将具有零高度,这将使加载叠加层在第一个远程请求期间不可见。 要可视化加载叠加层,请使用以下两种方法当中的一个:

  • 设置网格的高度
  • 将最小高度样式应用于div.k-grid-content元素

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

慧都高端UI界面开发


标签:

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

文章转载自:慧都网

登录 慧都网发表评论


暂无评论...

为你推荐

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

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

Kendo UI for jQuery

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

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