Web开发实用技能，看Kendo UI如何定义网格高度

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

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库。

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：启用固定高度和滚动功能的网格

设定最小高度

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

您可以使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中文网！