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

成都創(chuàng)新互聯(lián)公司是由多位在大型網(wǎng)絡(luò)公司、廣告設(shè)計(jì)公司的優(yōu)秀設(shè)計(jì)人員和策劃人員組成的一個(gè)具有豐富經(jīng)驗(yàn)的團(tuán)隊(duì)，其中包括網(wǎng)站策劃、網(wǎng)頁(yè)美工、網(wǎng)站程序員、網(wǎng)頁(yè)設(shè)計(jì)師、平面廣告設(shè)計(jì)師、網(wǎng)絡(luò)營(yíng)銷人員及形象策劃。承接：成都網(wǎng)站制作、做網(wǎng)站、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、網(wǎng)站改版、網(wǎng)頁(yè)設(shè)計(jì)制作、網(wǎng)站建設(shè)與維護(hù)、網(wǎng)絡(luò)推廣、數(shù)據(jù)庫(kù)開發(fā),以高性價(jià)比制作企業(yè)網(wǎng)站、行業(yè)門戶平臺(tái)等全方位的服務(wù)。

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庫(kù)。

Height

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

入門指南

注意：僅在啟用滾動(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)題行、過(guò)濾器行、數(shù)據(jù)、頁(yè)腳和pager的綜合等于小部件的預(yù)期高度。這就是為什么如果在創(chuàng)建窗口小部件后通過(guò)JavaScript更改網(wǎng)格的高度，則必須隨后調(diào)用resize方法。 通過(guò)這種方式，Grid可以重新計(jì)算其數(shù)據(jù)區(qū)域的高度。

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

圖1：?jiǎn)⒂霉潭ǜ叨群蜐L動(dòng)功能的網(wǎng)格

設(shè)定最小高度

注意：?jiǎn)⒂锰摂M滾動(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類來(lái)定位所有小部件實(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)整大小方法將測(cè)量Grid “div”的高度，并調(diào)整可滾動(dòng)數(shù)據(jù)區(qū)域的高度。

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

• 如果可用于Grid的垂直空間取決于布局的自定義大小調(diào)整（由用戶控制），請(qǐng)使用與布局更改有關(guān)的合適事件或方法來(lái)執(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沒(méi)有設(shè)置高度，則數(shù)據(jù)區(qū)域最初將具有零高度，這將使加載疊加層在第一個(gè)遠(yuǎn)程請(qǐng)求期間不可見(jiàn)。 要可視化加載疊加層，請(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í)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

分享題目：Web開發(fā)中KendoUI是如何定義網(wǎng)格高度
文章鏈接：http://aaarwkj.com/article40/jegjho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、小程序開發(fā)、全網(wǎng)營(yíng)銷推廣、面包屑導(dǎo)航、網(wǎng)站設(shè)計(jì)公司、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)