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應用程序的最完整UI庫。

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

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

使用列寬和滾動

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

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

常見情況

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

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

將table-layout更改為fixed。

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

消除列和標題錯位

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

---

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