Kendo UI for jQuery數(shù)據(jù)管理使用教程：Grid Width

---

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

Width

默認(rèn)情況下，Grid沒有設(shè)置寬度，其操作類似于塊級元素，并擴(kuò)展為100％的寬度（父元素的寬度）。

入門指南

要控制Grid的寬度，請將CSS width屬性設(shè)置為Grid本身或其某些父類， 如果您使用層次結(jié)構(gòu)，并且明細(xì)模板是可滾動的，否則明細(xì)模板必須比所有主列的寬度之和窄。

如果啟用滾動并且所有列寬的總和大于Grid的寬度，則會出現(xiàn)一個水平滾動條。 如果禁用滾動并且各列不適合，則它們會溢出Grid的div元素。div溢出導(dǎo)致窗口小部件的右邊界穿過數(shù)據(jù)單元格，因?yàn)镚rid是div元素內(nèi)的table元素，而包圍它們的內(nèi)容表可以水平擴(kuò)展到100％以上，而div元素缺乏這種操作。

為避免表溢出，請應(yīng)用以下任一方法：

• 啟用滾動功能，在使用Kendo UI Grid MVC封裝器時，默認(rèn)情況下降禁用滾動功能。
• 為Grid wrapper設(shè)置一個足夠大的寬度或最小寬度的樣式——div class =“ k-widget k-grid”元素。
• （僅當(dāng)前兩個方法不可接受時才使用此方法）浮動Grid wrapper和清除小部件后的浮動，浮動元素會根據(jù)需要自動擴(kuò)展和收縮以包圍其內(nèi)容。

應(yīng)用最小寬度

根據(jù)特定的方案，您可以使用以下任何一種方法來定義網(wǎng)格的最小寬度。

如果禁用了滾動，請使用以下CSS。

#GridID
{
min-width: 800px;
}

如果啟用了滾動并且Grid不是分層的（沒有嵌套表），請使用以下CSS。

#GridID .k-grid-header-wrap > table, // A header table.
#GridID .k-grid-content table, // A data table, no virtual scrolling.
#GridID .k-virtual-scrollable-wrap table // A data table, with virtual scrolling.
{
min-width: 800px;
}

如果啟用了滾動并且網(wǎng)格是分層的（具有嵌套表），請使用以下CSS。

#GridID .k-grid-header-wrap > table, // A header table.
#GridID .k-grid-content table, // A data table, no virtual scrolling.
#GridID .k-virtual-scrollable-wrap table // A data table, with virtual scrolling.
{
min-width: 800px;
}
#GridID .k-grid-content table table, // A data table, no virtual scrolling.
#GridID .k-virtual-scrollable-wrap table table // A data table, with virtual scrolling.
{
min-width: initial;
}

---

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