Web開發中Kendo UI是如何定義網格高度

這篇文章將為大家詳細講解有關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元素

關于Web開發中Kendo UI是如何定義網格高度就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。