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

發(fā)布時間：2020/11/01 瀏覽量：3324

Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的完整UI庫

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應(yīng)用程序的完整UI庫。

Height

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

入門指南

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

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

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

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

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

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

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

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

設(shè)定最小高度

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

您可以使Grid根據(jù)其行數(shù)并在一定范圍內(nèi)垂直擴展和收縮，為此請將最大和/或最大高度樣式應(yīng)用于可滾動數(shù)據(jù)區(qū)域，并且不要設(shè)置網(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％的樣式應(yīng)用于小部件的

wrapper。根據(jù)web標(biāo)準(zhǔn)，將百分比設(shè)置高度的元素要求明確設(shè)置其父代的高度。遞歸地應(yīng)用此要求，直到達到像素高度的元素或html元素為止。高度為100％的元素不能具有邊距、填充、邊框或同級元素，這就是為什么您還必須刪除網(wǎng)格的默認邊框的原因。

2. 確保Grid內(nèi)部布局適應(yīng)“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í)行它。另外，如果使用鎖定列，則不必應(yīng)用該方法。

如果可用于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è)置高度，則數(shù)據(jù)區(qū)域最初將具有零高度，這將使加載疊加層在第一個遠程請求期間不可見。要可視化加載疊加層，請使用以下兩種方法當(dāng)中的一個：

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

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

下一篇：Wowza Streaming Engine的負載均衡(Load Balancing)概述

上一篇：TeamViewer IoT 物流和運輸行業(yè)解決方案：能夠?qū)崿F(xiàn)遠程報警及協(xié)助等

国产精品久久久久久2021,日韩精品无码av中文无码版,亚洲精品久久久午夜麻豆,无码成人精品日本动漫纯h

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