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

---

Kendo UI for jQuery R1 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庫。

要設(shè)置Grid列的寬度，請使用其width屬性。

 當您通過col元素從HTML表創(chuàng)建網(wǎng)格時，也可以設(shè)置列的寬度；但是，當對表單元格使用寬度樣式時，請避免這種方法。

使用列寬和滾動

根據(jù)是否啟用滾動，網(wǎng)格的列會獲得不同的操作：

• 默認情況下，在Kendo UI for jQuery，UI for JSP和PHP UI中為Grid啟用了滾動。 啟用滾動時：
  • table-layout樣式設(shè)置為fixed，并且所有未定義寬度的列均顯示為相同寬度。
  • 當水平空間不足時，沒有定義寬度的列將縮小為零寬度。
  • 無論單元格內(nèi)容如何，都應(yīng)遵守定義的列寬。
  • 如果單元格的內(nèi)容無法容納，則網(wǎng)格將對其進行包裝或修剪。
  • 在調(diào)整列大小的過程中，只有調(diào)整大小的列和table才會更改其寬度。
  • 調(diào)整列的大小或隱藏列時，網(wǎng)格將向其表元素應(yīng)用像素寬度。 此操作有助于維持除當前已調(diào)整大小或隱藏的列之外的所有其余列的寬度。
  • 當所有列均具有像素寬度并且它們的總和超過網(wǎng)格的寬度時，將出現(xiàn)一個水平滾動條。
  • 當所有列均具有像素寬度并且其總和小于Grid的寬度時，將忽略列寬，并且瀏覽器將展開所有列。
• 默認情況下，UI for ASP.NET MVC和UI for ASP.NET Core.中的網(wǎng)格禁用滾動。 禁用滾動時：
  • table-layout樣式設(shè)置為auto，如果未明確定義，則列寬由瀏覽器和單元格內(nèi)容確定，這是HTML表的默認操作。
  • 瀏覽器將嘗試遵循所有設(shè)置的列寬，但可能會根據(jù)其內(nèi)容來調(diào)整某些列的寬度。

常見情況

本節(jié)提供有關(guān)需要在Grid中實現(xiàn)列寬的常見方案信息。

使不可滾動網(wǎng)格服從列寬

將table-layout更改為fixed。

#GridID > table // Header and data table.
{
table-layout: fixed;
}

消除列和標題錯位

要在調(diào)整網(wǎng)格大小時消除列和標題的不對齊，請?zhí)峁┲辽僖涣袥]有指定寬度的列，以便它可以自由調(diào)整。

---

掃描關(guān)注慧聚IT微信公眾號，及時獲取最新動態(tài)及最新資訊