Kendo UI for jQuery數據管理使用教程：虛擬滾動

---

Kendo UI for jQuery R1 2020 SP2試用版下載

Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四個控件。Kendo UI for jQuery是創建現代Web應用程序的最完整UI庫。

虛擬滾動是分頁的替代方法。

入門指南

啟用虛擬滾動后，當用戶垂直滾動時，網格將從其遠程數據源加載數據。

$("#grid").kendoGrid({
scrollable: {
virtual: true
},
// Other configuration.
});

在虛擬滾動中，HTML輸出與標準滾動功能不同——網格的數據表未放置在可滾動容器內。 滾動條屬于單獨的div.k滾動條，當數據行必須手動滾動到特定位置時，該滾動條會影響方案。

<div class="k-widget k-grid">
<div class="k-grid-header">
<div class="k-grid-header-wrap">
<table>...</table>
</div>
</div>
<div class="k-grid-content">
<div class="k-virtual-scrollable-wrap">
<table>...</table>
</div>
<div class="k-scrollbar k-scrollbar-vertical">
...<!-- div elements which generate a scrollbar -->...
</div>
</div>
</div>

當用戶以其虛擬滾動模式滾動Grid時，Grid會動態顯示到達的滾動位置的表行。 如果Gris使用本地數據，或者它的遠程數據已被加載和緩存，則小部件的呈現速度和性能取決于：

• 頁面大小
• 網格高度
• 滾動速度
• 數據項總數

如果項目總數很大并且滾動速度很快，則可以頻繁地重新渲染網格表。 另外，如果頁面大小很大，則用戶可能會發現滾動平滑的問題。 在這種情況下，請減小頁面大小并增加網格高度來提高滾動性能。

設置滾動條

虛擬滾動依賴于偽造的滾動條，它的大小不是由瀏覽器確定的，而是根據已經加載的數據平均行高來計算的。 如此一來行高度可變可能會導致意外的操作，例如無法滾動到最后一頁上的最后一行。 為確保所有表行都具有相同的高度，請使用以下任一選項：

• 禁用自動換行
• 設置一個明確的、足夠大的行高，如以下示例所示。

.k-virtual-scrollable-wrap tr
{
height: 3em;
}

// Or

.k-virtual-scrollable-wrap td
{
white-space: nowrap;
}

在手機上使用

在看不到可以抓取和拖動滾動條的移動設備上，大量數據項（例如數千個）的虛擬滾動可能會妨礙對所有表行的輕松訪問，因為大量數據項將需要大量的數據。另一方面，對數量很少（例如少于200個）的項目使用虛擬滾動沒有多大意義。 觸摸設備上的虛擬滾動依賴于拖放事件，該事件比本地滾動要慢。 這可能會導致性能問題。

已知局限性

注意：當不支持或不建議使用虛擬滾動時，取決于數據項的數量，請恢復為標準分頁，或者恢復為不進行分頁的非虛擬滾動。

• 啟用虛擬滾動或分頁， 不要同時應用兩個功能。
• 虛擬滾動與分組和層次結構不兼容，從R3 2017開始支持編輯。
• 虛擬滾動依賴于根據已加載的數據計算平均行高，行高變化很大或未綁定到數據的行數未知（例如組標題）可能會導致意外操作。
• 提供足夠大的網格頁面大小，以便表行不適合可滾動數據區域。 否則，將不會創建垂直虛擬滾動條，網格的頁面大小必須大于數據區域中可見表行數的三倍以上。
• 初始化時需要顯示具有設置高度的可滾動Grid。 通過這種方式，網格可以根據小部件的總高度來調整其可滾動數據區域的高度。 在某些情況下，初始化時Grid可能是不可見的——例如，放置在最初不激活的TabStrip標簽或另一個小部件中時，在這種情況下請使用以下任一選項：
  • 在其元素仍然可見的情況下初始化Grid。
  • 在父窗口小部件的適當事件中初始化網格——例如，在TabStrip的Activate事件中。
• 由于與高度相關的瀏覽器限制（無法避免），虛擬滾動最多可以處理一百萬個記錄，確切的記錄數取決于瀏覽器和行高。 如果您使用的行數大于瀏覽器無法處理的行數，則可能會發生意外的窗口小部件操作或JavaScript錯誤。 在這種情況下，請還原為標準分頁。
• 在虛擬模式下刷新或替換Grid數據時，必須將虛擬滾動條的位置重置為零，例如，使用$('#GridID .k-scrollbar').scrollTop(0);。在某些情況下，您可能還需要調用refresh（）方法。
• 啟用虛擬滾動時，不支持以編程方式滾動到特定的Grid行，因為無法可靠地預測該行的確切滾動偏移量。
• 當網格可導航時，鍵盤導航僅支持向上箭頭鍵和向下箭頭鍵，不支持Page Up和Page Down鍵滾動。
• 通過使用以下示例，新的persistSelection可以與單選功能一起使用。不建議使用多重選擇功能，因為發生滾動時會從DOM中刪除舊頁面。 這可能會破壞選擇，因為滾動到達新頁面后DOM元素不存在。

---

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