Kendo UI for jQuery數(shù)據(jù)管理使用教程：網(wǎng)格高度

---

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是創(chuàng)建現(xiàn)代Web應用程序的最完整UI庫。

Height

默認情況下，Grid沒有設置高度，并且會擴展來適合所有表格行。

入門指南

注意：僅在啟用滾動時將高度設置為Grid。

若要設置網(wǎng)格的高度，請使用以下任一方法：

• 將內(nèi)聯(lián)高度樣式應用于從中初始化Grid的“div”。
• 使用窗口小部件的height屬性，該屬性將內(nèi)聯(lián)樣式應用于Grid wrapper—與上一個選項相同。
• 使用外部CSS，例如使用ID或.k-grid CSS類應用高度樣式。

設置網(wǎng)格的高度后，它將計算其可滾動數(shù)據(jù)區(qū)域的適當高度，以使標題行、過濾器行、數(shù)據(jù)、頁腳和pager的綜合等于小部件的預期高度。這就是為什么如果在創(chuàng)建窗口小部件后通過JavaScript更改網(wǎng)格的高度，則必須隨后調(diào)用resize方法。 通過這種方式，Grid可以重新計算其數(shù)據(jù)區(qū)域的高度。

在特定情況下，您可以使用JavaScript或作為div.k-grid-content元素的外部CSS將高度樣式設置為可滾動數(shù)據(jù)區(qū)域。 在這種情況下，請避免為Grid設置高度。

圖1：啟用固定高度和滾動功能的網(wǎng)格

設定最小高度

注意：啟用虛擬滾動時不適用。

您可以使Grid根據(jù)其行數(shù)并在一定范圍內(nèi)垂直擴展和收縮，為此請將最大和/或最大高度樣式應用于可滾動數(shù)據(jù)區(qū)域，并且不要設置網(wǎng)格的任何高度。如果使用網(wǎng)格的MVC wrapper，請刪除默認的數(shù)據(jù)區(qū)域高度。除GridID，您還可以使用.k-grid類來定位所有小部件實例。

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

啟用自動調(diào)整大小

注意：僅適用于可滾動網(wǎng)格。

1. 要允許Grid及其父級調(diào)整大小，請將高度為100％的樣式應用于小部件的<div class =“ k-grid”> wrapper。根據(jù)web標準，將百分比設置高度的元素要求明確設置其父代的高度。遞歸地應用此要求，直到達到像素高度的元素或html元素為止。 高度為100％的元素不能具有邊距、填充、邊框或同級元素，這就是為什么您還必須刪除網(wǎng)格的默認邊框的原因。

2. 確保Grid內(nèi)部布局適應“div”wrapper高度的變化，如果這些更改由調(diào)整瀏覽器窗口的大小觸發(fā)的，請訂閱瀏覽器的窗口調(diào)整大小事件并執(zhí)行Grid的resize方法。 調(diào)整大小方法將測量Grid “div”的高度，并調(diào)整可滾動數(shù)據(jù)區(qū)域的高度。

• 如果將Grid放置在Kendo UI Splitter或Kendo UI窗口中，則無需調(diào)用resize方法，因為這些小部件將自動執(zhí)行它。 另外，如果使用鎖定列，則不必應用該方法。
• 如果可用于Grid的垂直空間取決于布局的自定義大小調(diào)整（由用戶控制），請使用與布局更改有關(guān)的合適事件或方法來執(zhí)行Grid的調(diào)整大小方法。 在這種情況下，即使您使用鎖定的列，也要調(diào)用resize方法。

在Kendo UI Q3 2013版本之后，resize方法適用于Kendo UI版本。 對于早期版本不是調(diào)整大小，請使用以下方法，該方法實際上以相同的方式起作用。

$(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);
});

配置加載指示器

在內(nèi)部，Grid使用kendo.ui.progress方法在遠程讀取請求期間顯示加載疊加。 如果禁用滾動，則覆蓋圖會顯示在整個網(wǎng)格上。 如果啟用了滾動，則覆蓋圖將顯示在可滾動數(shù)據(jù)區(qū)域上。 如果啟用了滾動并且Grid沒有設置高度，則數(shù)據(jù)區(qū)域最初將具有零高度，這將使加載疊加層在第一個遠程請求期間不可見。 要可視化加載疊加層，請使用以下兩種方法當中的一個：

• 設置網(wǎng)格的高度
• 將最小高度樣式應用于div.k-grid-content元素

---

了解最新Kendo UI最新資訊，請關(guān)注Telerik中文網(wǎng)！