Web開發(fā)中Kendo UI是如何定義網(wǎng)格高度

這篇文章將為大家詳細(xì)講解有關(guān)Web開發(fā)中Kendo UI是如何定義網(wǎng)格高度，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

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四個(gè)控件。Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫。

Height

默認(rèn)情況下，Grid沒有設(shè)置高度，并且會(huì)擴(kuò)展來適合所有表格行。

入門指南

注意：僅在啟用滾動(dòng)時(shí)將高度設(shè)置為Grid。

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

• 將內(nèi)聯(lián)高度樣式應(yīng)用于從中初始化Grid的“div”。

• 使用窗口小部件的height屬性，該屬性將內(nèi)聯(lián)樣式應(yīng)用于Grid wrapper—與上一個(gè)選項(xiàng)相同。

• 使用外部CSS，例如使用ID或.k-grid CSS類應(yīng)用高度樣式。

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

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

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

設(shè)定最小高度

注意：啟用虛擬滾動(dòng)時(shí)不適用。

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

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

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

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

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

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

• 如果將Grid放置在Kendo UI Splitter或Kendo UI窗口中，則無需調(diào)用resize方法，因?yàn)檫@些小部件將自動(dòng)執(zhí)行它。 另外，如果使用鎖定列，則不必應(yīng)用該方法。

• 如果可用于Grid的垂直空間取決于布局的自定義大小調(diào)整（由用戶控制），請(qǐng)使用與布局更改有關(guān)的合適事件或方法來執(zhí)行Grid的調(diào)整大小方法。 在這種情況下，即使您使用鎖定的列，也要調(diào)用resize方法。

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

$(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方法在遠(yuǎn)程讀取請(qǐng)求期間顯示加載疊加。 如果禁用滾動(dòng)，則覆蓋圖會(huì)顯示在整個(gè)網(wǎng)格上。 如果啟用了滾動(dòng)，則覆蓋圖將顯示在可滾動(dòng)數(shù)據(jù)區(qū)域上。 如果啟用了滾動(dòng)并且Grid沒有設(shè)置高度，則數(shù)據(jù)區(qū)域最初將具有零高度，這將使加載疊加層在第一個(gè)遠(yuǎn)程請(qǐng)求期間不可見。 要可視化加載疊加層，請(qǐng)使用以下兩種方法當(dāng)中的一個(gè)：

• 設(shè)置網(wǎng)格的高度

• 將最小高度樣式應(yīng)用于div.k-grid-content元素

關(guān)于Web開發(fā)中Kendo UI是如何定義網(wǎng)格高度就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。