Kendo UI for jQuery數(shù)據(jù)管理使用教程：虛擬滾動

---

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是創(chuàng)建現(xiàn)代Web應用程序的最完整UI庫。

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

入門指南

啟用虛擬滾動后，當用戶垂直滾動時，網(wǎng)格將從其遠程數(shù)據(jù)源加載數(shù)據(jù)。

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

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

<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會動態(tài)顯示到達的滾動位置的表行。 如果Gris使用本地數(shù)據(jù)，或者它的遠程數(shù)據(jù)已被加載和緩存，則小部件的呈現(xiàn)速度和性能取決于：

• 頁面大小
• 網(wǎng)格高度
• 滾動速度
• 數(shù)據(jù)項總數(shù)

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

設(shè)置滾動條

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

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

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

// Or

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

在手機上使用

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

已知局限性

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

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

---

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

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